Calling base class function - class inheritance in JavaScript

Question

Please check out the following example:

MyBaseClass = function(a) {
     this.a = a;
};

$.extend(MyBaseClass.prototype, {
    init: function() {
        console.log('I am initializing the base class');
    }
});

MyChildClass = $.extend(MyBaseClass, {
    init: function() {
        MyBaseClass.prototype.init();
        console.log('I am initializing the child class');
    }
});

var = new MyChildClass();
var.init();

Тhis should output both 'I am initializing the base class' and 'I am initializing the child class'.

I need to be able to inherit the class MyBaseClass, but still to be able to call his init() method at the beginning of the new init() method.

How do I do that?

Solution 1

jQuery's extend doesn't build inheritance but "Merge the contents of two or more objects together into the first object".

Use prototype based inheritance to achieve your inheritance and explicitly call the "super" method :

MyBaseClass = function(a) {
     this.a = a;
};
MyBaseClass.prototype.init = function() {
    console.log('I am initializing the base class');
};

MyChildClass = function(a) {
  this.a = a;
}
MyChildClass.prototype = Object.create(MyBaseClass.prototype); // makes MyChildClass "inherit" of MyBaseClass
MyChildClass.prototype.init = function() {
    MyBaseClass.prototype.init.call(this); // calls super init function
    console.log('I am initializing the child class');
};

var child= new MyChildClass();
child.init();

Output :

I am initializing the base class
I am initializing the child class 

Solution 2

jsFiddle Demo

Couple of things. extend really just adds on properties, it doesn't do much. So you need to have a function for your class ready, inherit from the base class, and then use extend on that classes prototype.

function MyChildClass(){};
MyChildClass.prototype = new MyBaseClass();
$.extend(MyChildClass.prototype, {
 init: function() {
    MyBaseClass.prototype.init();
    console.log('I am initializing the child class');
 }
});

Here is another approach that I like to use for inheritance - when the specificity of methods is going to be an issue - which is to store the base class in its own property

function MyChildClass(){};
MyChildClass.prototype = new MyBaseClass();
MyChildClass.prototype.base = new MyBaseClass();
$.extend(MyChildClass.prototype, {
 init: function() {
    this.base.init();
    console.log('I am initializing the child class');
 }
});

Solution 3

Another prototype based pattern to achieve this goal:

MyBaseClass = function(a) {
     this.a = a;
};

MyBaseClass.prototype = {
    init: function() {
        console.log('I am initializing the base class');
    }
};

MyChildClass = function() {};
MyChildClass.prototype = $.extend(new MyBaseClass(), {
    init: function() {
        this.super.init.call(this);
        console.log('init child');
    },
    super: MyBaseClass.prototype,
    constructor: MyChildClass
});

var a = new MyChildClass();
a.init();

Output:

I am initializing the base class
init child

Here this.super stores reference to base class.