深入解析JavaScript继承：ES5与ES6的对比与演进

在JavaScript中，继承是实现代码复用和抽象的核心机制之一。随着ES6（ECMAScript 2015）的推出，类的语法糖（class和extends）彻底改变了开发者实现继承的方式。本文将通过对比ES5和ES6的继承实现，揭示其底层原理与核心差异，并探讨为何ES6的继承更符合现代开发需求。

一、ES5的继承：基于原型链的手动实现

1. 核心机制

ES5的继承依赖于原型链和构造函数的组合，需要开发者手动操作原型对象。其实现分为两步：

1. 继承属性：在子类构造函数中调用父类构造函数（Parent.call(this)），将父类的属性绑定到子类实例。
2. 继承方法：通过原型链（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关键字提供了一种更简洁的继承方式，其底层仍基于原型链，但隐藏了复杂的实现细节：

1. 继承属性：通过super()调用父类构造函数，初始化子类实例的父类属性。
2. 继承方法：自动设置子类的原型链（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
实例创建顺序	子类实例在调用构造函数时直接创建	子类实例由父类构造函数初始化（通过 super()）
属性继承	通过 Parent.call(this) 显式绑定到子类实例	通过 super() 隐式初始化父类属性
方法继承	手动设置原型链	自动通过 extends 设置原型链
静态方法继承	需手动绑定（如 Child.__proto__ = Parent）	自动继承

 

四、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 继承：

1. 实例化子类：通过 new Child() 创建子类实例（此时 this 为空对象）。
2. 属性继承：在子类构造函数中调用 Parent.call(this)，将父类属性绑定到子类实例的 this。
3. 方法继承：通过设置子类原型链（Child.prototype = Object.create(Parent.prototype)）共享父类方法。

ES6 继承：

1. 初始化 this：子类构造函数必须调用 super()，由父类构造函数初始化子类实例的 this。
2. 加工 this：在 super() 后，子类构造函数可操作 this，添加子类特有的属性和方法。
3. 语法机制：通过 class 和 extends 自动处理原型链和静态方法继承。