JavaScript Inheritance in EcmaScript 5
Tags: javascript, oop
Published: 2019-11-05 12:41:38

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:

```javascript
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 ?
```javascript
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 :
```javascript
function B(){
    this.cMethod = function () {
        alert("C method");
    }
}
```
ok but how can I say that B extends A ? 
Simple : `B.prototype = new A();`
Example :
```javascript
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.__
```javascript
function B(){
    this.bMethod = function() {
        alert("overriding");
    }
    this.cMethod = function () {
        alert("C method");
    }
}
```
and use it as before.
```javascript
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:
```javascript
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:
```javascript
this.extends = A; 
this.extends();
```
##full code:
```javascript
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 !