JavaScript实现继承的六种方式及优缺点详解

作者：木棉时间：2026-10-23 07:00:15浏览：138

本文系统梳理JavaScript中实现继承的六种主要方式，包括原型链、借用构造函数、组合继承、原型式继承、寄生式继承及寄生组合式继承。详细分析各模式的实现原理、优缺点及适用场景，重点解析组合继承调用两次构造函数的问题，并推荐寄生组合式继承作为最理想的引用类型继承范式。

本文整理自《JavaScript高级程序设计》，旨在总结JavaScript中实现继承的各种方法及其优缺点。

原型链继承及其问题

1. 原型链

ECMAScript将原型链视为实现继承的核心概念，并以此作为主要的继承实现机制。

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

首先回顾构造函数、原型与实例之间的关系：每个构造函数都拥有一个原型对象，该原型对象包含一个指向构造函数的指针；而实例则包含一个指向原型对象的内部指针。

如果我们将原型对象设置为另一个类型的实例，结果会如何？此时，该原型对象将包含一个指向另一个原型的指针，同时另一个原型中也包含指向另一个构造函数的指针。若另一个原型又是另一个类型的实例，这种关系将继续层层递进，形成一条由实例指向原型的链条，这就是原型链的基本原理。


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

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

上述代码定义了两个类型：SuperType和SubType。每个类型分别包含一个属性和一个方法。两者的主要区别在于SubType继承了SuperType，继承方式是通过创建SuperType的实例，并将该实例赋值给SubType.prototype来实现的。其实质是重写原型对象，将其替换为新类型的实例。这意味着，原本存在于SuperType实例中的所有属性和方法，现在都转移到了SubType.prototype中。在确立继承关系后，我们向SubType.prototype添加了一个新方法，从而在继承SuperType属性和方法的基础上，扩展了新的功能。

原型链继承及其问题

需要注意的是，此时instance.constructor指向的是SuperType。这是因为SubType.prototype中的constructor属性被重写所致。实际上，并非SubType原型的constructor属性本身被修改，而是SubType的原型指向了另一个对象——即SuperType的原型，而该原型对象的constructor属性指向的是SuperType。

2. 默认原型

事实上，前文示例展示的原型链还缺少一环。我们知道，所有引用类型默认都继承自Object，这一继承也是通过原型链实现的。必须牢记，所有函数的默认原型都是Object的实例，因此默认原型都包含一个内部指针，指向Object.prototype。这也正是所有自定义类型都能继承toString()、valueOf()等默认方法的根本原因。

原型链继承及其问题

3. 原型链的问题

原型链虽然功能强大，可用于实现继承，但也存在一些问题。其中最主要的问题源于包含引用类型值的原型。


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

function SubType(){
}
//继承了SuperType
SubType.prototype = new 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,black"

原型链的第二个问题是：在创建子类型实例时，无法向超类型的构造函数中传递参数。准确地说，是在不影响所有对象实例的情况下，无法给超类型的构造函数传递参数。鉴于此，加上前文讨论的原型中包含引用类型值带来的问题，实践中很少单独使用原型链。

借用构造函数及其局限

4. 借用构造函数

在子类型构造函数的内部调用超类型构造函数。


function SuperType() {
 this.colors = ['red', 'blue', 'green'];
}
function SubType() {
 SuperType.call(this);
}
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"

通过使用call()方法（或apply()方法），我们实际上是在（未来将要）新创建的SubType实例的环境中执行了SuperType构造函数。这使得在SubType对象上执行了SuperType()函数中定义的所有对象初始化代码。结果是，SubType的每个实例都拥有了自己独立的colors属性副本。

与原型链相比，借用构造函数的一个显著优势是可以在子类型构造函数中向超类型构造函数传递参数。


function SuperType() {
 this.colors = ['red', 'blue', 'green'];
}
function SubType() {
 SuperType.call(this);
}
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"

5. 借用构造函数的问题

由于方法都在构造函数中定义，因此无法实现函数复用。此外，超类型原型中定义的方法对子类型而言也是不可见的，导致所有类型都只能使用构造函数模式。

组合继承与双重调用问题

6. 组合继承

组合继承（combination inheritance），有时也称为伪经典继承，是将原型链和借用构造函数技术结合的一种继承模式，旨在发挥两者的优势。其思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用，又保证了每个实例拥有自己的属性。


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.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();   //29

var instance2 = new SubType("Greg", 27);
console.log(instance2.colors);  //"red,blue,green"
instance2.sayName();   //"Greg";
instance2.sayAge();   //27

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。此外，instanceof和isPrototypeOf也可用于识别基于组合继承创建的对象。

然而，无论何种情况，组合继承都会调用两次超类型构造函数：一次是在创建子类型原型时，另一次是在子类型构造函数内部执行时。

原型式与寄生式继承

7. 原型式继承

这种方法并未使用严格意义上的构造函数。它借助原型，基于已有的对象创建新对象，且无需因此创建自定义类型。


function object(o){
 function F(){}
 F.prototype = o;
 return new F();
}
var person = {
 name: "Nicholas",
 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"

ECMAScript 5通过新增Object.create()方法规范了原型式继承。该方法接收两个参数：一个用作新对象原型的对象，以及（可选的）一个为新对象定义额外属性的对象。当只传入一个参数时，Object.create()的行为与object()方法相同。 Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。


var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person, {
 name: {
  value: "Greg"
 }
});

console.log(anotherPerson.name); //"Greg"

当无需创建构造函数，而只想让一个对象与另一个对象保持类似关系时，原型式继承完全胜任。但需注意，包含引用类型值的属性始终会共享相应的值，这与使用原型模式的情况一致。

8. 寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式增强对象，最后再像它完成了所有工作一样返回对象。


function createAnother(original){
 var clone = Object.create(original); //通过调用函数创建一个新对象
 clone.sayHi = function(){   //以某种方式来增强这个对象
  console.log("hi");
 };
 return clone;     //返回这个对象
}

在此示例中，createAnother()函数接收一个参数，即作为新对象基础的对象。然后，将该对象（original）传递给object()函数，将返回的结果赋值给clone。接着为clone对象添加一个新方法sayHi()，最后返回clone对象。使用方式如下：


var person = {
 name: "Nicholas",
 friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

该示例中的代码基于person返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法，还拥有自己的sayHi()方法。

使用寄生式继承来为对象添加函数，会因无法做到函数复用而降低效率；这一点与构造函数模式类似。

寄生组合式继承方案

9. 寄生组合式继承

前文提到，组合继承是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);   //第二次调用SuperType()

 this.age = age;
}

SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 console.log(this.age);
};

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

原型链继承及其问题

如上图所示，存在两组name和colors属性：一组在实例上，一组在SubType原型中。这就是调用两次SuperType构造函数的结果。好在我们已经找到了解决这一问题的方法——寄生组合式继承。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

其基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。


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

此示例中的inheritPrototype()函数实现了寄生组合式继承的最简形式。该函数接收两个参数：子类型构造函数和超类型构造函数。函数内部第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认constructor属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inheritPrototype()函数的语句，替换前文例子中为子类型原型赋值的语句。


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;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
 console.log(this.age);
};

此示例的高效性体现在它只调用了一次SuperType构造函数，从而避免了在SubType.prototype上创建不必要的、多余的属性。同时，原型链保持不变，因此还能正常使用instanceof和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

10. 总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对本站的支持。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01