Javascript中的多个原型继承

时间:2017-04-07 07:25:29

标签: javascript inheritance prototypal-inheritance

我有2个基类,比如ParentClass1ParentClass2。现在我想对ChildClass做多个原型继承。

使用单亲班级,我的代码如下。

var ParentClass = function() {

};

ParentClass.prototype.greetUser = function(name) {
    console.log('Hi. Hello,', name);
};

var ChildClass = function(name) {
  this.greetUser(name);
};

ChildClass.prototype = Object.create(ParentClass.prototype);

var obj = new ChildClass('John');
// Hi. Hello, John

现在,当我必须继承 2个父类时,我尝试了以下代码。

var ParentClass1 = function() {

};

ParentClass1.prototype.greetUser = function(name) {
    console.log('Hi. Hello,', name);
};

var ParentClass2 = function() {

};

ParentClass2.prototype.askUser = function(name) {
    console.log('Hey, how are you,', name);
};

var ChildClass = function(name) {
  this.askUser(name);
  this.greetUser(name);
};

ChildClass.prototype = Object.create(ParentClass1.prototype);
ChildClass.prototype = Object.create(ParentClass2.prototype);

var obj = new ChildClass('John');
// Error.

但这似乎是,这只会接受最后提到的Object.create()

稍后,它尝试将第二个Object.create()切换为Object.assign(),然后就可以了。

ChildClass.prototype = Object.create(ParentClass1.prototype);
ChildClass.prototype = Object.assign(ChildClass.prototype, ParentClass2.prototype);

但我担心Object.assign()正在做克隆。那是正确的方法吗?还是有更好的选择吗?

很抱歉提出这个问题。提前谢谢。

注意:我简要了解了thisthis

1 个答案:

答案 0 :(得分:3)

prototype属性进行两次分配并不是很有用,因为最后一项将覆盖第一项。您可以这样做,因为Object.assign接受更多参数:

Object.assign(ChildClass.prototype, ParentClass1.prototype, ParentClass2.prototype);

请注意Object.assign执行副本。必须制作副本是肯定的:您需要一个与其他原型不同的原型对象:两者的结合。因此,您不可避免地需要以某种方式将父原型的成员复制到目标原型对象中。

一些警告:

1。 Object.assign制作浅层副本

由于Object.assign执行浅拷贝,您可能会遇到干扰父原型的情况。这可能是你想要或不想要的。

示例:



var ParentClass1 = function() {

};

ParentClass1.prototype.userList = [];
ParentClass1.prototype.addUser = function(name) {
    this.userList.push(name);
};

var ParentClass2 = function() {

};

ParentClass2.prototype.askUser = function(name) {
    console.log('Hey, how are you,', name);
};

var ChildClass = function(name) {
  this.askUser(name);
};

Object.assign(ChildClass.prototype, ParentClass1.prototype, ParentClass2.prototype);

var p = new ParentClass1('Parent');
var obj = new ChildClass('John');
obj.addUser('Tim'); // Added to child, but
console.log(p.userList); // now parent also has Tim...




2。 Object.assign仅复制可枚举属性

这意味着在某些情况下,您将无法获得您所希望的属性。假设您也希望从Array.prototype继承,那么您希望您的子对象具有length属性,但由于它不可枚举,因此您无法使用Object.assign:< / p>

&#13;
&#13;
var ParentClass2 = function() {

};

ParentClass2.prototype.askUser = function(name) {
    console.log('Hey, how are you,', name);
};

var ChildClass = function(name) {
  this.askUser(name);
};

Object.assign(ChildClass.prototype, Array.prototype, ParentClass2.prototype);

var obj = new ChildClass('John');
console.log(obj.length); // undefined
console.log(Array.prototype.length); // 0
&#13;
&#13;
&#13;

3。 Object.assign执行getter

Object.assign无法复制getter。而是执行它们以检索副本的值。在父原型上执行代码可能会对父原型的状态产生影响(通过设计该getter)。这可能是此副本上下文中的意外行为。

其次,getter的值可以是对象的一些计算和状态的结果,每次引用时返回不同的值。但是object.assign只会引用一次,然后创建一个始终具有该单个值的属性。请参阅此示例中的效果:

&#13;
&#13;
var ParentClass1 = function() {

};

// Define a getter on the prototype which returns a
// random number between 0 and 999, every time it is referenced:
Object.defineProperty(ParentClass1.prototype, 'randomNumber', { 
    get: function() {
        return Math.round(Math.random() * 1000); 
    }, 
    enumerable: true 
});

var ParentClass2 = function() {};

ParentClass2.prototype.askUser = function(name) {
    console.log('Hey, how are you,', name);
};

var ChildClass = function(name) {
  this.askUser(name);
};

Object.assign(ChildClass.prototype, ParentClass1.prototype, ParentClass2.prototype);

var p = new ParentClass1('Parent');
var obj = new ChildClass('John');
console.log('different:');
console.log(p.randomNumber);
console.log(p.randomNumber);
console.log(p.randomNumber);
console.log('always same:');
console.log(obj.randomNumber);
console.log(obj.randomNumber);
console.log(obj.randomNumber);
&#13;
.as-console-wrapper { max-height: 100% !important; top: 0; }
&#13;
&#13;
&#13;

进一步阅读

将多个原型组合成一个新原型的概念通常被创造"mixin"。以下是一些相关的Q&amp; A: