JS 继承方式全解析：原型链、构造函数到 ES6 Class

继承是面向对象编程的核心机制，允许子类（派生类）获取父类（基类）的属性和方法。在 JavaScript 中，实现继承的路径多样，以下是六种主流继承模式的详细解析。

原型链继承（Prototype Inheritance）

这是 JavaScript 最基础的继承方式，通过将子类的原型对象指向父类的实例来实现。虽然子类能继承父类的属性和方法，但存在显著缺陷：所有子类实例会共享父类中的引用类型属性，极易引发数据冲突和意外行为。

function Parent() {
  this.name = 'Parent'
}
Parent.prototype.sayHello = function () {
  console.log(`Hello, I'm ${this.name}`)
}
function Child() {
  this.name = 'Child'
}
Child.prototype = new Parent()
const child = new Child()
child.sayHello() // 输出 "Hello, I'm Child"

构造函数继承（Constructor Inheritance）

该模式通过在子类构造函数内部调用父类构造函数来实现。它有效解决了原型链继承中属性共享的问题，但代价是父类定义在原型上的方法无法被子类继承，导致每个实例都需重新创建方法，造成内存浪费。

function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
const child = new Child();
console.log(child.name); // 输出 "Child"

组合继承（Combination Inheritance）

组合继承结合了原型链和构造函数继承的优势：利用原型链继承方法，利用构造函数继承属性。然而，这种模式存在性能隐患，因为父类构造函数会被调用两次，分别用于属性继承和方法继承，增加了不必要的开销。

function Parent() {
this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
}
function Child() {
Parent.call(this);
this.name = 'Child';
}
Child.prototype = new Parent();
const child = new Child();
child.sayHello(); // 输出 "Hello, I'm Child"

原型式继承（Prototype-based Inheritance）

此模式以现有对象为模板创建新对象，新对象可继承模板的属性和方法。需注意，若模板包含引用类型属性，修改子对象的属性仍会影响模板对象，因为两者共享引用。

const parent = {
name: 'Parent',
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 输出 "Hello, I'm Child"
```js

寄生式继承（Parasitic Inheritance）

寄生式继承类似于原型式继承，但在创建新对象时，可以额外添加或定制属性和方法。这种方式允许根据具体需求对对象进行增强，提供了更高的灵活性，适用于需要特定扩展的场景。

function createChild(parent) {
const child = Object.create(parent);
child.name = 'Child';
child.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
return child;
}
const parent = {
name: 'Parent'
};
const child = createChild(parent);
child.sayHello(); // 输出 "Hello, I'm Child"

ES6 类继承（Class Inheritance）

ES6 引入的 class 关键字简化了面向对象编程。通过 extends 关键字，子类可以继承父类的属性和方法。这种语法糖底层仍基于原型链，但提供了更清晰、更符合传统面向对象语言的继承结构。

class Parent {
constructor() {
this.name = 'Parent';
}
sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
}
class Child extends Parent {
constructor() {
super();
this.name = 'Child';
}
}
const child = new Child();
child.sayHello(); // 输出 "Hello, I'm Child"

理解这些继承模式的关键在于掌握其核心概念。实际开发中，不应盲目追求复杂继承，而应根据场景选择最简方案。例如，原型式继承通过复制内部对象副本来实现继承，既保留了属性，又允许自由调用函数和对象。开发者可在此基础上添加属性或修改参数，实现定制化原型，且新增属性互不干扰。

以上为 JavaScript 六种常见继承方法的详细解析。如需了解更多 JavaScript 进阶技巧，建议查阅本站其他相关文章。

JavaScript 六种常见继承模式详解与代码示例