ES6类继承与extends使用详解

ES6 的 extends 关键字以简洁清晰的语法封装了 JavaScript 原型链继承的本质，让子类不仅能自然继承父类的实例方法、属性、getter/setter 和静态方法，还能通过 super() 安全调用父构造器或复用父级逻辑——看似“面向对象”的新特性，实则扎根于原型机制；掌握它，既能写出语义明确、可维护性强的类结构，又能避免 this 访问错误、继承链断裂等常见陷阱，是现代 JavaScript 开发中不可或缺的底层功底。

extends 是 ES6 中用于声明类继承关系的关键字，它让子类能继承父类的原型方法、静态方法和构造逻辑，本质是基于原型链的继承，但语法更清晰、语义更明确。

继承父类的实例方法和属性

子类通过 extends 继承父类后，会自动获得父类原型上的所有方法（如 sayHello()），同时可通过 super() 在构造函数中调用父类构造器，确保正确初始化 this。

示例：

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;
  }
  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Buddy', 'Golden');
dog.speak(); // Buddy makes a sound（继承自 Animal）
dog.bark();  // Woof!（自身定义）

重写方法并用 super 调用父级实现

子类可定义同名方法覆盖父类行为，若需在新逻辑中复用父类原有功能，用 super.方法名() 显式调用。

• 不能在调用 super() 前访问 this
• super 在方法中指向父类的原型对象，不是父类实例
• 静态方法中也可用 super.静态方法（ES2022+ 支持）

继承静态方法和 getter/setter

extends 同样支持继承父类的 static 方法及 get/set 访问器，它们也会出现在子类的构造函数（即类本身）或原型上。

class Vehicle {
  static getType() { return 'Vehicle'; }
  get wheels() { return this._wheels || 4; }
  set wheels(val) { this._wheels = val; }
}

class Car extends Vehicle {}

Car.getType(); // 'Vehicle'（静态方法被继承）
const car = new Car();
car.wheels = 4;
console.log(car.wheels); // 4（getter/setter 正常工作）

注意：extends 底层仍是原型链

尽管语法简洁，extends 并未改变 JavaScript 的原型继承本质：

• 子类的 prototype.__proto__ 指向父类的 prototype
• 子类构造函数的 __proto__ 指向父类构造函数（实现静态方法继承）
• 可用 Object.getPrototypeOf(Dog.prototype) === Animal.prototype 验证

今天关于《ES6类继承与extends使用详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！