JavaScript 类继承机制深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00239/article/details/148416504

JavaScript 类继承机制深度解析

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

在面向对象编程中，类继承是一个核心概念。JavaScript 虽然基于原型继承，但通过 ES6 的 class 语法糖，我们可以实现类似传统面向对象语言的类继承机制。本文将深入剖析 JavaScript 中类继承的工作原理和使用技巧。

继承基础：extends 关键字

extends 关键字是 JavaScript 实现类继承的基础语法。通过它，子类可以继承父类的属性和方法。

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

class Dog extends Animal {
  // Dog 类继承了 Animal 类的所有方法和属性
}

原型链机制

实际上，extends 关键字背后依然是 JavaScript 的原型继承机制：

子类的 prototype 对象的 [[Prototype]] 指向父类的 prototype
子类函数本身的 [[Prototype]] 指向父类函数

这种双重原型链确保了静态方法和实例方法都能正确继承。

方法重写与 super 关键字

当子类需要修改或扩展父类行为时，可以使用方法重写。

基本重写

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

使用 super 调用父类方法

class Dog extends Animal {
  speak() {
    super.speak();  // 先调用父类方法
    console.log(`${this.name} barks loudly!`);
  }
}

super 有两种使用方式：

super.method() - 调用父类方法
super() - 在构造函数中调用父类构造函数

构造函数继承的注意事项

子类构造函数必须遵守特殊规则：

class Dog extends Animal {
  constructor(name, breed) {
    super(name);  // 必须在使用 this 前调用
    this.breed = breed;
  }
}

为什么需要 super()？

派生类（有 extends 的类）的构造函数具有 [[ConstructorKind]]:"derived" 标记
普通构造函数会创建 this 对象，但派生类构造函数不会
只有父类构造函数才能初始化 this
因此必须先调用 super() 才能使用 this

类字段继承的陷阱

类字段的继承行为与方法不同：

class Animal {
  name = 'animal';
  
  constructor() {
    console.log(this.name);
  }
}

class Rabbit extends Animal {
  name = 'rabbit';
}

new Rabbit(); // 输出 'animal' 而非 'rabbit'

原因解析

类字段初始化顺序：

基类字段在构造函数调用前初始化
派生类字段在 super() 调用后初始化

因此当父类构造函数执行时，子类字段还未初始化。

super 的内部机制 [[HomeObject]]

为了正确解析父类方法，JavaScript 为每个方法添加了 [[HomeObject]] 内部属性。

工作原理

方法定义时，[[HomeObject]] 被设置为所属对象
super.method 通过 [[HomeObject]].[[Prototype]] 查找方法
这种绑定是永久的，即使方法被复制到其他对象

注意事项

let animal = {
  sayHi() { console.log("I'm an animal"); }
};

let rabbit = {
  __proto__: animal,
  sayHi() { super.sayHi(); }
};

let plant = {
  sayHi() { console.log("I'm a plant"); }
};

let tree = {
  __proto__: plant,
  sayHi: rabbit.sayHi
};

tree.sayHi();  // 仍然输出 "I'm an animal"

这是因为 sayHi 方法的 [[HomeObject]] 始终指向 rabbit。