Javascript 组合继承 (Combination Inheritance)问题

JavaScript 组合继承(Combination Inheritance)是 JavaScript常用的继承方式,但是组合继承也有一些问题,无法做到像Java 那样的继承。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”, “green”];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//inherit properties
SuperType.call(this, name);
this.age = age;
}
//inherit methods
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType(“Nicholas”, 29);
instance1.colors.push(“black”);
alert(instance1.colors); //”red,blue,green,black”
instance1.sayName(); //”Nicholas”;
instance1.sayAge(); //29

var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors); //”red,blue,green”
instance2.sayName(); //”Greg”;
instance2.sayAge(); //27

以上的代码使用原型链的方式进行继承,SubType.prototype = new SuperType(); , 使用借用构造函数方式,使用子类可以调用父类的构造函数SuperType.call(this, name);

JavaScript 组合继承 (Combination Inheritance)问题

上述的示例中,最重要的存在的问题是,SuperType() 构造方法执行了两次, name 和 colors 属性 会重复存在,一个在原型链中,一个在对象的实例中。在使用的时候,就是相当于实例属覆盖了原型链中的属性,

以上代码的原生链结构为:SubType.proto —》SuperType

从上面的图中可以发现有两个 age 和 colors, 其中 SuperType 中的是冗余的。

参考《Understanding JavaScript Constructors