javascript如何实现继承_es6的class语法有何优势

夢幻星辰 2025-12-22 00:00:00 次阅读

JavaScript继承有传统组合继承和ES6 class两种方式：前者通过call/apply与Object.create实现但易出错；后者用extends和super封装细节，更简洁规范，但仍是原型链语法糖，不支持多重继承。

JavaScript 中实现继承的方式有多种，ES6 的 class 语法本质上是基于原型链的语法糖，它没有引入新的面向对象机制，但大幅提升了可读性与开发效率。

传统方式：基于原型链和构造函数的继承

在 ES6 之前，常用组合继承（构造函数 + 原型链）来模拟类式继承：

用 call() 或 apply() 在子类构造函数中调用父类，继承实例属性；
将父类原型赋给子类原型（如 Sub.prototype = Object.create(Super.prototype)），继承方法；
手动修复 constructor 指向，避免丢失子类构造器引用。

这种方式逻辑清晰但代码冗长，容易出错，比如忘记设置 constructor、多次调用父类构造函数、或原型链污染等。

ES6 class 继承：简洁、规范、语义明确

class 语法通过 extends 和 super() 封装了上述细节：

extends 自动建立正确的原型链关系（Sub.__proto__ === Super，Sub.prototype.__proto__ === Super.prototype）；
super() 在子类构造器中必须调用，确保父类实例属性被正确初始化；
静态方法、getter/setter、new.target 等特性天然支持，无需额外适配；
编译工具（如 Babel）能可靠转译为兼容代码，便于工程化落地。

例如：

class Animal {
  constructor(name) { this.name = name; }
  speak() { console.log(`${this.name} makes a sound`); }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造器
    this.breed = breed;
  }
  speak() { console.log(`${this.name} barks`); }
}