JavaScript -- 寄生组合式继承

上文我们写了关于组合继承，这个继承模式已经非常优秀了，但是还是有一点不足。

function SuperType(name){ 
    this.name = name; 
    this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function(){ //方法可以通过原型链继承
    console.log(this.name); 
}; 
function SubType(name, age){ 
 //继承属性
 SuperType.call(this, name); //属性必须显示调用超类构造函数，私有化
 this.age = age; 
} 
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){ 
 console.log(this.age); 
}; 
var instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
console.log(instance1.colors); //"red,blue,green,black" 
instance1.sayName(); //"Nicholas"; 
instance1.sayAge();
 
var instance2 = new SubType("Greg", 27); 
console.log(instance2.colors); //"red,blue,green" 
instance2.sayName(); //"Greg"; 
instance2.sayAge();

我们注意到，子类其实俩菜调用了超类的构造函数。

1：

2：

在第一次调用 SuperType 构造函数时，SubType.prototype 会得到两个属性：name 和 colors；它们都是 SuperType 的实例属性，只不过现在位于 SubType 的原型中。当调用 SubType 构造函数时，又会调用一次 SuperType 构造函数，这一次又在新对象上创建了实例属性 name 和 colors。于是，这两个属性就屏蔽了原型中的两个同名属性。

不难发现，原型上的俩个属性完全是多余的，我们应该想办法除去。

我们构建如下函数

function inheritPrototype(subType, superType)  {
    const prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。

function inheritPrototype(subType, superType)  {
    const prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
inheritPrototype(SubType, SuperType)
// SubType.prototype = new SuperType(); 
// SubType.prototype.constructor = SubType;

这样的效果比单纯组合继承要好一点，因为subType的原型上没有多余的属性，只调用了一次 SuperType 构造函数。

像这样的继承模式称为寄生组合式继承，一种很理想的继承模式。

JavaScript -- 寄生组合式继承

猜你喜欢