JavaScript 继承的 6 种方式详解:从原型链到寄生组合
本文详细解析JavaScript中实现继承的六种核心方式,包括原型链、构造函数、组合、原型式、寄生式及寄生组合继承。重点分析各模式的优缺点,如属性共享、参数传递及内存效率,并推荐寄生组合继承为最佳实践方案,帮助开发者根据场景选择合适方案。
原型链继承
原型链继承是 ECMAScript 中核心的继承机制。其核心逻辑在于利用原型链来继承多个引用类型的属性与方法。所谓原型链,是指每个构造函数都拥有对应的原型对象,通过构造函数创建的实例对象内部包含一个指向该原型对象的指针(__proto__)。若该原型对象恰好是另一个类型的实例,则其内部也会包含指向更上层原型的指针,如此层层链接,便构成了原型链。
代码:
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;
};
let instance = new SubType();
console.log(instance.getSuperValue()); // true
缺点
1. 当父类实例中的属性为引用类型时,该属性会转化为子类的原型属性。这意味着所有子类实例将共享这些引用类型的属性,修改任意一个实例的属性值,其他实例的对应属性也会随之改变。
2. 在实例化子类时,无法向父类的构造函数传递参数。
构造函数继承
为了解决原型中包含引用值所导致的继承问题,一种被称为“盗用构造函数”的技术应运而生并广泛流行,该技术也被称为“对象伪装”或“经典继承”。其核心思路是在子类的构造函数内部调用父类的构造函数。具体实现时,可以利用 call() 或 apply() 方法,以新创建的子类对象作为执行上下文来调用父类函数。
缺点:
function SuperType(name) {
this.colors = ["red","blue","green"];
this.name = name;
}
function SubType(name) {
SuperType.call(this,name);
}
let instance1 = new SuperType('小明')
let instance2 = new SuperType('小白')
instance1.colors .push('yellow')
console.log(instance1) //{name:"小明",colors:["red","blue","green","yellow"]...}
console.log(instance2) //{name:"小白",colors:["red","blue","green"]...}
//可以传递参数 也修复了引用的问题 可以继承多个构造函数属性(call多个)
1. 方法只能在构造函数内部定义,导致函数无法复用。每次创建子类实例时,都会重新生成一次属性和方法,造成资源浪费。
2. 子类无法访问到定义在父类原型对象上的方法。
组合继承
组合继承融合了原型链继承与构造函数继承的优点。其基本策略是:利用原型链来继承定义在原型上的属性和方法,从而实现方法复用;同时通过构造函数继承实例属性,确保每个实例拥有独立的属性副本。这样既实现了方法的重用,又保证了每个实例属性的独立性。
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);
};
let instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //["red,blue,green,black"]
instance1.sayName(); // "Nicholas";
instance1.sayAge(); // 29
let instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // ["red,blue,green"]
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27
//可以继承父类原型上的属性,可以传参,可复用。 每个新实例引入的构造函数属性是私有的
缺点
该模式会调用两次父类构造函数,相对消耗较多内存资源。
原型式继承
即使不自定义特定类型,也可以通过原型机制实现对象间的信息共享。
function object(person) {
function F() {}
F.prototype = person
return new F()
}
let person = {
name:'小明',
colors:['red','blue']
}
let person1 = object(person)
person1.colors.push('green')
let person2 = object(person)
person1.colors.push('yellow')
console.log(person) //['red','blue','green','yellow']
适用场景:当你已有一个现有对象,并希望基于它创建一个新的对象时。你需要将该对象作为参数传入 object() 函数,随后对返回的对象进行适当修改。这类似于仅传递第一个参数时的 Object.create() 行为,本质上是对传入对象执行了一次浅拷贝。其缺点在于新实例的属性均为后续添加,无法实现复用。
寄生式继承
寄生式继承与原型式继承思路相近,类似于寄生构造函数和工厂模式。其做法是创建一个用于实现继承的函数,以特定方式增强对象,最后返回该增强后的对象。
function object(person) {
function F() {}
F.prototype = person
return new F()
}
function createAnother(original){
let clone = object(original); // 通过调用函数创建一个新对象
clone.sayHi = function() { // 以某种方式增强这个对象
console.log("hi");
};
return clone; // 返回这个对象
}
寄生式继承同样适用于主要关注对象而非类型和构造函数的场景。其缺点在于,通过寄生式继承为对象添加函数会导致函数难以复用,这与构造函数模式的缺陷类似。
寄生式组合继承
这是目前最常用且最佳的继承方式。组合继承虽然功能全面,但存在调用两次父类构造函数导致的效率问题。从本质上看,子类原型最终需要包含父类对象的所有实例属性,因此子类构造函数只需在执行时重写自身的原型即可。基本思路是避免通过调用父类构造函数来给子类原型赋值,而是获取父类原型的一个副本。简而言之,就是利用寄生式继承来继承父类原型,然后将返回的新对象赋值给子类原型。
//核心代码
function object(person) {
function F(params) {}
F.prototype = person
return new F()
}
function inheritPrototype(SubType,SuperType) {
let prototype = object(SuperType.prototype) //生成一个父类原型的副本
//重写这个实例的constructor
prototype.constructor = SubType
//将这个对象副本赋值给 子类的原型
SubType.prototype = prototype
}
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函数给子类原型赋值,修复了组合继承的问题
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
console.log(this.age);
};
总结
至此,关于 JavaScript 继承的六种方式已介绍完毕。如需了解更多相关 JS 继承内容,请搜索本站历史文章或继续浏览后续相关文章,感谢大家的支持!
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
