DEV Community

Nayden Gochev
Nayden Gochev

Posted on • Edited on

JavaScript Inheritance in EcmaScript 5

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");
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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");
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Overriding is fine too.

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 !

Top comments (0)