首页 > 代码库 > 13 对象 - 继承

13 对象 - 继承

2024-09-24 14:05:18   218人阅读

许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。

由于JS函数没有签名，在 ECMAScript 中无法实现接口继承。 ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。

 

1 继承的原理

继承是通过创建 SuperType 的实例，并将该实例赋给SubType.prototype 实现的。

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
function SubType(){
    this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue()); //true

关系图如下：

技术分享

拿上面的例子来说，调用instance.getSuperValue()会经历三个搜索步骤：

1）搜索实例；

2）搜索 SubType.prototype；

3）搜索 SuperType.prototype，最后一步才会找到该方法。

在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

事实上，前面例子中展示的原型链还少一环。我们知道，所有引用类型默认都继承了 Object，而这个继承也是通过原型链实现的。

所以，完整的原型链应该如下：

技术分享

 

由于原型链的关系，我们可以说 instance 是 Object、 SuperType 或 SubType 中任何一个类型的实例。

技术分享

 

原型链虽然很强大，可以用它来实现继承，但它也存在一些问题。

主要是由于共享导致的。如下代码：

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

//继承了 SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"

因为这种缺陷，实践中很少会单独使用原型链。

 

2 借用构造函数（经典继承）

function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
    //继承了 SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

解读：

第一， new SubType()会创建一个新对象。

第二， SubType()中的this指向这个新对象。

第三， 在这个新对象中执行SuperType()函数，也相当于在这个新对象中运行SuperType()函数，也就给这个新对象加了一个属性colors数组。

第四， 将这个新对象名为为instance1。

 

这种方法的缺陷：方法都在构造函数中定义，因此函数复用就无从谈起了。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

 

3 组合继承

指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(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(){
    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

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript 中最常用的继承模式。

 

13 对象 - 继承


联系
我们