在面向对象编程（OOP）中，继承是一种核心概念，允许通过扩展现有类来创建新类，从而提高代码的重用性和可维护性。JavaScript 作为一种动态语言，提供了多种实现继承的方式，并在 ES6中引入了新的继承特性和语法。在这篇博客中，我们将深入探讨 JavaScript 中的继承模式。
什么是继承？
继承是一种机制，通过这种机制，一个类（子类）可以继承另一个类（父类）的属性和方法。这样，子类可以复用父类的代码，同时还能添加新的属性和方法，或者覆盖父类的现有方法。
JavaScript 中的继承模式
JavaScript 的继承机制与传统面向对象编程语言（如 Java、C++）有所不同。由于 JavaScript 是基于原型的，继承主要通过原型链实现。下面我们将详细探讨几种常见的继承模式：
1. 原型链继承
原型链继承是 JavaScript 最基本的继承方式。每个对象都有一个原型对象，通过原型对象可以访问其他对象的属性和方法。
function Parent() {
this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
console.log('Hello from Parent');
};
function Child() {
this.age = 5;
}
// 设置 Child 的原型为 Parent 的实例
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child = new Child();
child.sayHello(); // 输出: Hello from Parent
console.log(child.name); // 输出: Parent
console.log(child.age); // 输出: 5
优点：
- 简单直接，易于理解。
- 子类可以访问父类的所有属性和方法。
缺点：
- 所有实例共享父类的引用类型属性，容易导致属性共享问题。
- 无法传递参数给父类构造函数。
扩展：
- 原型链继承适用于简单的对象扩展，但在处理复杂的对象关系时可能会遇到问题。
2. 借用构造函数（经典继承）
借用构造函数继承通过在子类构造函数中调用父类构造函数来实现继承。
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
function Child(name, age) {
Parent.call(this, name); // 调用父类构造函数
this.age = age;
}
const child1 = new Child('Child1', 5);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
const child2 = new Child('Child2', 6);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
优点：
- 解决了原型链继承中引用类型属性共享的问题。
- 子类可以向父类传递参数。
缺点：
- 每个子类实例都有父类实例的副本，无法复用父类的方法。
- 无法继承父类的原型方法。
扩展：
- 借用构造函数适用于需要向父类传递参数且不需要复用父类原型方法的场景。
3. 组合继承（原型链 + 借用构造函数）
组合继承结合了原型链继承和借用构造函数继承的优点，通过使用原型链继承父类的方法，通过借用构造函数继承父类的属性。
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayHello = function() {
console.log('Hello from ' + this.name);
};
function Child(name, age) {
Parent.call(this, name); // 继承父类属性
this.age = age;
}
// 继承父类方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child('Child1', 5);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
child1.sayHello(); // 输出: Hello from Child1
const child2 = new Child('Child2', 6);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
child2.sayHello(); // 输出: Hello from Child2
优点：
- 解决了引用类型属性共享的问题。
- 可以复用父类的方法。
缺点：
- 每次创建子类实例时，父类构造函数会被调用两次。
扩展：
- 组合继承是实际开发中较为常用的继承方式，因为它同时解决了属性共享和方法复用的问题。
4. 原型式继承
原型式继承通过一个中间对象来实现对象的浅复制。
function createObject(o) {
function F() {}
F.prototype = o;
return new F();
}
const parent = {
name: 'Parent',
colors: ['red', 'blue', 'green'],
sayHello() {
console.log('Hello from ' + this.name);
}
};
const child = createObject(parent);
child.name = 'Child';
child.colors.push('black');
console.log(child.colors); // 输出: ['red', 'blue', 'green', 'black']
child.sayHello(); // 输出: Hello from Child
const anotherChild = createObject(parent);
console.log(anotherChild.colors); // 输出: ['red', 'blue', 'green']
优点：
- 简单直接，适用于不需要单独构造函数的情况。
缺点：
- 引用类型属性仍然会共享。
- 只能进行浅复制。
扩展：
- 原型式继承是 ES5 中
Object.create的基础，适用于不需要原型方法的简单对象继承。
5. 寄生式继承
寄生式继承在原型式继承的基础上进行增强，为对象添加更多属性和方法。
function createObject(o) {
function F() {}
F.prototype = o;
return new F();
}
function createEnhancedObject(original) {
const clone = createObject(original);
clone.sayGoodbye = function() {
console.log('Goodbye from ' + this.name);
};
return clone;
}
const parent = {
name: 'Parent',
colors: ['red', 'blue', 'green'],
sayHello() {
console.log('Hello from ' + this.name);
}
};
const child = createEnhancedObject(parent);
child.name = 'Child';
child.colors.push('black');
console.log(child.colors); // 输出: ['red', 'blue', 'green', 'black']
child.sayHello(); // 输出: Hello from Child
child.sayGoodbye(); // 输出: Goodbye from Child
优点：
- 可以在不修改原型的情况下增强对象。
缺点：
- 无法实现函数复用，每次创建对象都会创建新的方法。
扩展：
- 寄生式继承适用于需要在创建对象时添加新方法的场景，但可能会导致内存开销增加。
6. 寄生组合式继承
寄生组合式继承是最有效的继承模式，结合了组合继承的优点，并避免了多余的父类构造函数调用。
function inheritPrototype(child, parent) {
const prototype = Object.create(parent.prototype); // 创建父类原型的副本
prototype.constructor = child; // 修正子类构造函数引用
child.prototype = prototype; // 将子类的原型设置为这个副本
}
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.sayHello = function() {
console.log('Hello from ' + this.name);
};
function Child(name, age) {
Parent.call(this, name); // 继承父类属性
this.age = age;
}
inheritPrototype(Child, Parent);
const child1 = new Child('Child1', 5);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
child1.sayHello(); // 输出: Hello from Child1
const child2 = new Child('Child2', 6);
console.log(child2.colors); // 输出: ['red', 'blue', 'green']
child2.sayHello(); // 输出: Hello from Child2
优点：
- 解决了引用类型属性共享的问题。
- 可以复用父类的方法。
- 父类构造函数只调用一次。
扩展：
- 寄生组合式继承在实际开发中非常常用，因为它优化了内存使用，避免了不必要的构造函数调用。
继承扩展
随着 ECMAScript 标准的演进，JavaScript 在继承机制上也进行了许多改进，尤其是在 ES6（ES2015）及之后的版本中引入了许多新的特性。
ES5: Object.create
ES5 引入了 Object.create 方法，用于创建一个新对象，其原型指向指定的对象。
const parent = {
name: 'Parent',
sayHello() {
console.log('Hello from ' + this.name);
}
};
const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 输出: Hello from Child
优点：
- 简化了原型式继承的实现。
- 更直观地创建基于原型的对象。
ES6: class 和 extends
ES6 引入了 class 语法糖，使得定义类和继承变得更加简洁和类似于传统 OOP 语言。
class Parent {
constructor(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
sayHello() {
console.log('Hello from ' + this.name);
}
}
class Child extends Parent {
constructor(name, age) {
super(name); // 调用父类构造函数
this.age = age;
}
}
const child1 = new Child('Child1', 5);
child1.colors.push('black');
console.log(child1.colors); // 输出: ['red', 'blue', 'green', 'black']
child1.sayHello(); // 输出: Hello from Child1
优点：
- 语法更简洁直观。
- 支持
super关键字调用父类方法和构造函数。 - 更接近传统 OOP 语言的继承方式。
ES10: 私有字段
ES10 引入了私有字段，使得类的属性可以实现真正的封装。
class Parent {
#name; // 私有字段
constructor(name) {
this.#name = name;
}
sayHello() {
console.log('Hello from ' + this.#name);
}
}
const parent = new Parent('Parent');
parent.sayHello(); // 输出: Hello from Parent
console.log(parent.#name); // 抛出错误：无法访问私有字段
优点：
- 提供真正的私有属性，增强了封装性。
结论
继承是 JavaScript 面向对象编程的重要组成部分，通过多种模式的灵活应用，可以有效地提高代码的可重用性和可维护性。本文详细介绍了原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承，并扩展了后续ES版本中的继承特性。
继承模式并不是万能的，每种模式都有其优缺点，需要根据具体的应用场景进行选择和调整。希望这篇博客能为你在实际开发中提供一些参考和灵感。
