17370845950

ES5 用寄生组合式继承手动操作原型链和构造函数，ES6 用 class/extends/super 实现语义化继承，强制 super() 调用且 this 由 super 初始化。

JavaScript 中的继承在 ES5 和 ES6 中实现思路一致，但语法和底层机制差异明显：ES5 依赖原型链和构造函数组合模拟，ES6 引入 class 和 extends 关键字，语法更简洁、语义更清晰，且真正支持了类式继承的语义约束（比如必须调用 super()）。

ES5 继承：手动操作原型与构造函数

ES5 没有原生 class 语法，继承需手动设置原型链，并确保子类能访问父类实例属性。常用方式是「寄生组合式继承」，它避免了借用构造函数多次调用父类的问题，也是最推荐的 ES5 继承模式。

关键步骤包括：

• 用 Object.create(Parent.prototype) 创建干净的子类原型对象
• 将子类的 constructor 指回自身（否则会指向父类）
• 在子类构造函数中用 Parent.call(this, ...) 继承实例属性

示例：

function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log('Hello from ' + this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 继承实例属性
  this.age = age;
}

// 设置原型链（寄生组合式）
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.info = function() {
  console.log(`${this.name}, ${this.age} years old`);
};

ES6 继承：class + extends + super

ES6 的 class 是语法糖，但 extends 不仅简化写法，还强制要求子类构造函数中必须调用 super() —— 这是因为子类的 this 必须基于父类实例初始化（V8 引擎内部需先建立父类上下文）。

特点包括：

• class 声明不会被提升（类似 let），必须先定义父类再 extends
• super() 必须在使用 this 前调用，否则报错 ReferenceError
• 静态方法、getter/setter、new.target 等特性天然支持继承

示例：

class Parent {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log('Hello from ' + this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 必须调用，且在 this 前
    this.age = age;
  }
  info() {
    console.log(`${this.name}, ${this.age} years old`);
  }
}

核心区别总结

不只是写法差异，本质在于执行逻辑和限制：

• 原型链建立方式不同：ES5 手动赋值 prototype；ES6 中 extends 自动设置 Child.__proto__ === Parent（静态继承）和 Child.prototype.__proto__ === Parent.prototype（实例继承）
• this 初始化时机不同：ES5 中 this 在子构造函数执行时已存在；ES6 中 this 由 super() 返回并绑定，未调用 super 就访问 this 直接抛错
• 静态成员可继承：ES6 中 static 方法可通过 Child.method() 调用，ES5 需手动复制或挂载
• 语义与工具友好性：ES6 class 更易被 TypeScript、Babel、调试工具识别，也更贴近其他语言开发者直觉

兼容性与实际建议

现代项目应优先使用 ES6 class 继承，配合 Babel 转译可覆盖旧环境。若需手写 ES5 兼容代码（如微前端子应用或极简包），寄生组合式继承仍是稳妥选择。注意：箭头函数不能用作构造函数，也无法被 extends；类内部方法默认不可枚举，符合预期设计。