JavaScript -- 组合继承

使用原型链来实现继承，看如下代码

function SuperType(){ 
    this.colors = ["red", "blue", "green"]; 
} 

function SubType() {
}

SubType.prototype = new SuperType();

const s1 = new SubType();
const s2 = new SubType();
s1.colors.push("black");
console.log(s2.colors);

这是一个很简单的继承，Subtype继承了SuperType的属性，看似没有问题。

不能发现，s1和s2有了关联，这是因为它们的colors数组是相同的，这是我们很不希望看到的。

所以，有了下面的改进版本。

function SuperType(){ 
    this.colors = ["red", "blue", "green"]; 
} 

function SubType() {
    SuperType.call(this);
}

SubType.prototype = new SuperType();

const s1 = new SubType();
const s2 = new SubType();
s1.colors.push("black");
console.log(s2.colors);

我们在子类型构造函数的内部调用超类型构造函数.使得SubType 的每个实例就都会具有自己的 colors 属性的副本了。

这样就没错了，属性必须是自己独立拥有，不能共享，但是方法确实可以的。

So?

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();

组合继承：其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。