JavaScript继承机制：原型链、构造函数及组合模式全解析

JavaScript继承机制概述

在大多数面向对象语言中，继承分为接口继承与实现继承两种形式。然而，ECMAScript无法支持接口继承，仅支持实现继承，且其核心机制主要依赖于原型链来完成。

原型链实现继承

1. 原型链

其核心思想是利用原型属性，使一个引用类型能够继承另一个引用类型的属性和方法。

理解构造函数、原型与实例之间的关系至关重要：每个构造函数都拥有一个原型对象，该原型对象包含一个指向构造函数的指针；同时，实例内部包含一个指向原型对象的指针。

以下是使用原型链实现继承的具体示例：


function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

借用构造函数实现继承

2. 借用构造函数

该方法的基本思路是在子类型构造函数的内部调用超类构造函数。通过调用 call() 或 apply() 方法，可以在新创建的对象上执行超类构造函数，从而实现继承。

具体代码示例如下：


function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

组合继承模式

3. 组合继承

组合继承旨在将原型链与借用构造函数两种技术结合使用，从而发挥两者的优势，形成一种更为完善的继承模式。

组合继承的代码示例如下：


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("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

原型式与寄生式继承

4. 原型式继承

其基本理念是借助原型，基于已有的对象创建新对象，且无需为此创建自定义的类型。

原型式继承的思想可以通过以下辅助函数来阐释：


function object(o) {
function F(){}
F.prototype = o;
return new F();
}

具体应用示例如下：


var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

ECMAScript5 引入了 Object.create() 方法，对原型式继承进行了规范化。该方法接收两个参数：第一个参数是用作新对象原型的对象，第二个参数是为新对象定义额外属性的对象。


var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5. 寄生式继承

其核心思想是创建一个专门用于封装继承过程的函数。该函数在内部以某种方式增强对象，最后返回该对象，仿佛它完成了所有工作。

寄生式继承的代码示例如下：


function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

寄生组合式继承

6. 寄生组合式继承

该模式的基本思想是通过借用函数来继承属性，并通过原型链的混成形式来继承方法。

其基本模型结构如下所示：


function inheritProperty(subType, superType) {
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}

寄生组合式继承的具体代码示例如下：


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;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

以上内容介绍了JavaScript实现继承的六种方式，希望能为读者提供有益的参考与帮助。

JavaScript实现继承的六种方式详解