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

Comments

Popular posts from this blog

Convert PFX certificate to JKS, P12, CRT

I recently had to use a PFX certificate for client authentication (maybe another post will be coming) and for that reason I had to convert it to a Java keystore (JKS).  We will create BOTH a truststore and a keystore, because based on your needs you might need one or the other.  The difference between truststore and keystore if you are not aware is(quote from the JSSE ref guide : TrustManager: Determines whether the remote authentication credentials (and thus the connection) should be trusted. KeyManager: Determines which authentication credentials to send to the remote host. Ok that's enough what you will need is openssl and Java 7+ ;) ! First let's generate a key from the pfx file, this key is later used for p12 keystore. openssl pkcs12 -in example.pfx -nocerts -out  example .key   Enter Import Password: MAC verified OK Enter PEM pass phrase: Verifying - Enter PEM pass phrase: As shown here you will be asked for the password of the pfx file, l

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> findAllByProperty(String propertyName,Object value); } All method names are very common so I don't

Patching a Maven library with your custom class.

Sometimes you use a library that has a bug. Or maybe it doesn’t has a bug but you want to change something. Of course if it is an open source you can get the sources… build them … with your change and so on. However this first takes a lot of time and second you need the sources. What you usually want .. is to just replace one class.. or few classes with something custom… maybe add a line .. or remove a line and so on. Yesterday… I had an issue with jboss-logging. The version I was using was 3.2.0Beta1 and it turns out that using this version and log4j2 2.0 final basically meant that no log is send to log4j2. The reason was a null pointer exception that was catched in jboss logging class called Log4j2Logger. The bug I submitted is here https://issues.jboss.org/browse/JBLOGGING-107 and it was fixed at the same day. However I will use it as an example since I didn’t knew when this will be fixed.. and I didn’t want to wait till it is fixed. So I was thinking what I want.. to take the j