在JavaScript中，继承是实现代码复用和抽象的核心机制之一。随着ES6（ECMAScript 2015）的推出，类的语法糖（class和extends）彻底改变了开发者实现继承的方式。本文将通过对比ES5和ES6的继承实现，揭示其底层原理与核心差异，并探讨为何ES6的继承更符合现代开发需求。
一、ES5的继承：基于原型链的手动实现
1. 核心机制
ES5的继承依赖于原型链和构造函数的组合，需要开发者手动操作原型对象。其实现分为两步：
- 继承属性：在子类构造函数中调用父类构造函数（
Parent.call(this)），将父类的属性绑定到子类实例。 - 继承方法：通过原型链（
Child.prototype = Object.create(Parent.prototype)）让子类实例共享父类方法。
2. 代码示例
// 父类 function Animal(name) {this.name = name; } Animal.prototype.speak = function() {console.log(this.name + " makes a noise."); };// 子类 function Dog(name, breed) {Animal.call(this, name); // 继承属性this.breed = breed; } Dog.prototype = Object.create(Animal.prototype); // 继承方法 Dog.prototype.constructor = Dog; // 修复构造函数指向 Dog.prototype.bark = function() {console.log(this.name + " barks!"); };// 使用 const dog = new Dog("Buddy", "Golden Retriever"); dog.speak(); // "Buddy makes a noise." dog.bark(); // "Buddy barks!"
3. 缺陷与问题
- 冗余属性：父类构造函数被调用两次（
Animal.call(this)和原型链设置），导致子类原型上可能存在冗余属性。 - 繁琐的手动操作：需要手动维护原型链和构造函数指向，容易出错。
- 静态方法不继承：父类的静态方法需手动绑定到子类。
二、ES6的继承：基于class和extends的语法糖
1. 核心机制
ES6通过class和extends关键字提供了一种更简洁的继承方式，其底层仍基于原型链，但隐藏了复杂的实现细节：
- 继承属性：通过
super()调用父类构造函数，初始化子类实例的父类属性。 - 继承方法：自动设置子类的原型链（
Child.prototype.__proto__ === Parent.prototype）。
2. 代码示例
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);} }class Dog extends Animal {constructor(name, breed) {super(name); // 必须调用super()！this.breed = breed;}bark() {console.log(`${this.name} barks!`);} }// 使用 const dog = new Dog("Buddy", "Golden Retriever"); dog.speak(); // "Buddy makes a noise." dog.bark(); // "Buddy barks!"
3. 关键特性
- 强制调用
super()：子类构造函数必须调用super()后才能使用this，因为子类实例的创建依赖父类构造函数的初始化。 - 自动继承静态方法：父类的静态方法（如
Parent.staticMethod()）会被子类自动继承。 - 不可枚举的方法：类中定义的方法默认不可枚举（
Object.keys(Child.prototype)不会包含它们）。
三、ES5与ES6继承的核心差异
| 特性 | ES5 | ES6 |
|---|---|---|
| 语法 | 手动操作原型链和构造函数 | 使用class和extends语法糖 |
super关键字 |
无，需显式调用父类构造函数（Parent.call） |
必须调用super()以初始化父类属性 |
| 静态方法继承 | 需手动绑定（Child.__proto__ = Parent） |
自动继承 |
| 原型链设置 | 手动维护（易出错） | 自动处理（Child.prototype.__proto__指向父类） |
| 方法可枚举性 | 原型方法默认可枚举 | 类方法不可枚举 |
| 构造函数调用次数 | 父类构造函数可能被调用两次 | 父类构造函数仅调用一次 |
四、ES6继承的底层原理
尽管ES6的class看似引入了传统面向对象语言的类机制，但其本质仍是基于原型的继承。以下代码揭示了extends的底层行为：
class Parent {} class Child extends Parent {}// 原型链关系 console.log(Child.prototype.__proto__ === Parent.prototype); // true console.log(Child.__proto__ === Parent); // true（继承静态方法）
super()的作用：
调用父类构造函数，但其内部this指向子类实例。因此，super()并非创建父类实例，而是为子类实例初始化父类属性。
五、总结
- ES5的继承是显式的、低级的，要求开发者深入理解原型链。
- ES6的继承是隐式的、高级的，通过语法糖隐藏复杂性，更贴近现代开发需求。
