调用基类函数-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?

Answer 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 

Answer 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');
 }
});

Answer 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.