调用基类函数——JavaScript 中的类继承

Calling base class function - class inheritance in JavaScript

提问by barakuda28

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

Тhis 应该输出“我正在初始化基类”和“我正在初始化子类”。

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.

我需要能够继承类 MyBaseClass，但仍然能够在新的 init() 方法的开头调用他的 init() 方法。

How do I do that?

我怎么做？

回答by Denys Séguret

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

jQuery 的扩展不构建继承，而是“将两个或多个对象的内容合并到第一个对象中”。

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

使用基于原型的继承来实现您的继承并显式调用“super”方法：

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 

回答by Travis J

jsFiddle Demo

jsFiddle 演示

Couple of things. extendreally 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.

几件事。extend真的只是增加了属性，它没有多大作用。所以你需要为你的类准备一个函数，从基类继承，然后在该类原型上使用扩展。

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

回答by dfsq

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.superstores reference to base class.

这里this.super存储对基类的引用。