Skip to main content

JavaScript inheritance (object-oriented programming)

 

There are many posts explaining what JavaScript inheritance is how it works, is it bad or good, how it is comparable with Java inheritance with millions of examples using third party apis or function to make inheritance look more like C#/C++/Java Inheritance.

This post is just to show HOW inheritance looks without anything else except browser so next time when you need to find it you can open this post which explains everything you need.

JavaScript uses so called prototype inheritance you don’t need to know more except it is different then a C#/C++/Java way of doing inheritance

Define a class

In JavaScript you can define class like this:

function A(){
    this.aMethod = function (){
        alert("A method");
    }
    this.bMethod = function () {
        alert( "B Method");
    }
}

Yes, yes there are different ways I find this one the most easy one  you can read more about the ways how to create a class in JavaScript here : http://www.phpied.com/3-ways-to-define-a-javascript-class/

Next you have a class how can you use it ?

var a = new A();
a.bMethod(); //will print B method
a.aMethod(); //will print A method

BAM nothing else, easy right?

ok so what if you want to extend this class ?

Prototype Inheritance

First you will create another class:

function B(){
    this.cMethod = function () {
        alert("C method");
    }
}

ok but how can I say that B extends A ? Simple : B.prototype = new A();

Example :

B.prototype = new A();

var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print B method
b.cMethod(); //will print C method

Overriding is fine too.

function B(){
    this.bMethod = function() {
        alert("overriding");
    }
    this.cMethod = function () {
        alert("C method");
    }
}

And use it as before ( keep in mind the .prototype = new A is required only ones)

B.prototype = new A();

var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod();// will print C method

Full example:


function A(){
    this.aMethod = function (){
        alert("A method");
    }
    this.bMethod = function () {
        alert( "B Method");
    }
}

function B(){
    this.bMethod = function() {
        alert("overriding");
    }
    this.cMethod = function () {
        alert("C method");
    }
}

B.prototype = new A();

var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod(); //will print C Method

 

Inheritance through Functions

If you don’t like prototypes for some reason you can use a inheritance through functions.

Example:

you just need when you define a class B (the subType) to call this.someFunctionName = supertype and then invoke this.someFunctionName(). Example this.extends = A; this.extends();

Full Example:


function A(){
    this.aMethod = function (){
        alert("A method");
    }
    this.bMethod = function () {
        alert( "B Method");
    }
}

function B(){
    this.extends = A;
    this.extends();
   
    this.bMethod = function() {
        alert("overriding");
    }
    this.cMethod = function () {
        alert("C method");
    }
}

var b = new B();
b.aMethod(); //will print A method
b.bMethod(); //will print overriding
b.cMethod(); //will print C method



UPDATE: Under Internet Explorer if you want to use inheritance through Functions the FUNCTION name that you have to use SHOULD NOT BE "extends" the above example with extends will not work because IE don't like extends :), use some other name like "inheritFrom" for example

Labels:

Comments

Post a Comment

Popular Posts

Hibernate Generic DAO.

When you use Hibernate and DAO pattern it is a good idea to use a Generic Base Dao. The fallowing code snippet contains GenericDAO that is a base class for all my DAO classes. This GenericDAO uses HibernateDaoSupport from Spring for its implementation if you want you can use JpaDaoSupport or JdbcDaoSupport in your projects. My Generic DAO interface looks like this : package org.joke.myproject.dao.base; import java.io.Serializable; import java.util.List; /** * @author Naiden Gochev * @param <E> * @param <PK> */ public interface GenericDao<E,PK  extends Serializable> {     PK save(E newInstance);     void update(E transientObject);     void saveOrUpdate(E transientObject);     void delete(E persistentObject);     E findById(PK id);     List<E> findAll();     List<E> f...
10 comments
Read more

RichFaces server-side paging with DataTable.

Most of the component toolkits have build in support for server-side paging this days but in rest of the cases you need to customize a little the data model or data provider or component itself to have data paging. The reason why I write this post is because when I first saw richfaces everythink was perfect except the server-side paging. They have paging but it was client side based on JavaScript witch just doesn't work in many cases and I loose a lot of time to understand all models, which model I must extend and how to do it to create a data model with server side paging. At the current version of RichFaces on the demo page information about how to do server-side paging at least exist http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=dataModel&cid=3608154 but like always the JBoss/RedHat/Exadel doesn’t provide us a fast full easy working example and we must loose a lot of time to search for classes in the demo. The reason why I write this post is to giv...
10 comments
Read more

Generate JavaDoc with UML diagrams

In my life many times has happened when I am assigned to a totally new project that I have no idea what it is about, that has to go live in 2 weeks and that I have to fix some issues in this ultra strange code sometimes even code written in different language. On my question is there any documentation the answer is: Yes but it is very old or no. So in short they want me to start working on a project with no documentation at all. My second question is is there a javadoc and the anwer is : yeah … kind of … so I am in a project with 30% javadoc with methods in French language for example ( I don’t know even a single word in French) so in short I am loosing 2 weeks to understand what is using what what is the model what is PersonnePhysique  and what is this crazy domain model. I believe this has happened with everyone of you at least once so what can you do ? You can start digging into the java code like crazy ( like everyone of us have tried many times) You can install ...
2 comments
Read more