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