loading...

JavaScript Inheritance in EcmaScript 5

gochev profile image Nayden Gochev Updated on ・3 min read

As you all know in JavaScript 6th Edition - ECMAScript 2015 we now have classes and all crazy mambo jambo from other object-oriented programming languages. But this was not the case just a few years ago, maybe it is not the case even today for you my dear reader so I would like to explain how this was working so called prototype inheritance :)

There are many posts today about inheritance in JavaScript however most of them are "modern" and you might look for an old school Internet Explorer 6 like JavaScript 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");
    }
}

WTF ? But this is function !? Yes, yes there are different ways I find this one the most easy one so I am using this one in my example, however 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/ - also old school.

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 which is not linked at ALL with the first one :

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.

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 code:

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.
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 code:

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

FINAL NOTE - because JavaScript and Internet Explorer are special.

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

Goodbye and thanks for all the fish !

Discussion

pic
Editor guide