阅读视图

发现新文章,点击刷新页面。

es6 中的类的继承

ES6 中 super 关键字的详细解析

在 ES6 中,super 关键字是类继承的核心组成部分。它用于调用父类的构造函数和方法。在子类继承父类时,super 的正确使用至关重要。了解如何使用 super() 来触发父类构造函数的执行,以及如何在方法中通过 super.method() 调用父类的方法,是理解 JavaScript 类和继承机制的关键。

1. super():调用父类构造函数

当子类继承父类时,子类的构造函数默认并不会执行父类的构造函数。为了确保父类的初始化逻辑被正确执行,子类必须显式调用 super() 来触发父类构造函数的执行。特别是当父类有构造函数时,super() 必须在子类构造函数中调用,否则子类无法正确继承父类的属性,且会抛出错误。

示例:不调用 super() 会出错
class A {
  constructor(name) {
    this.name = name;
    console.log('A constructor');
  }
}

class B extends A {
  constructor(name, age) {
    // 如果没有调用 super(name),会导致错误
    this.age = age;
    console.log('B constructor');
  }
}

const b = new B('Alice', 25); // 错误:必须先调用 super()

运行上述代码时,将抛出如下错误:

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this'.

这是因为在子类构造函数中,必须先调用 super(),以便初始化父类的部分。这是 JavaScript 类继承中的一条规则:子类构造函数中必须先调用 super(),然后才能访问 this

2. super.method():调用父类的方法

除了在构造函数中调用 super() 以初始化父类的属性外,super 还可以在子类的方法中用于调用父类的同名方法。这对于在子类中重写父类方法时保留父类的原有逻辑非常有用。

示例:子类调用父类的方法
class A {
  method() {
    console.log('A method');
  }
}

class B extends A {
  method() {
    super.method();  // 调用父类 A 的 method()
    console.log('B method');
  }
}

const b = new B();
b.method();

输出:

A method
B method

在这个例子中,子类 B 重写了 method 方法,并在其中通过 super.method() 调用了父类 Amethod() 方法。这样,子类不仅执行了父类的方法,还可以添加自己的逻辑。

3. super() 在多层继承中的行为

当存在多层继承时,super() 的调用顺序会遵循继承链,从子类向上逐层调用父类的构造函数和方法。

示例:多层继承中的 super()
class A {
  constructor() {
    console.log('A constructor');
  }
  method() {
    console.log('A method');
  }
}

class B extends A {
  constructor() {
    super();  // 调用 A 的构造函数
    console.log('B constructor');
  }

  method() {
    super.method();  // 调用 A 的 method()
    console.log('B method');
  }
}

class C extends B {
  constructor() {
    super();  // 调用 B 的构造函数,B 中又调用了 A 的构造函数
    console.log('C constructor');
  }

  method() {
    super.method();  // 调用 B 的 method(),B 中又调用了 A 的 method()
    console.log('C method');
  }
}

const c = new C();
c.method();

输出:

A constructor
B constructor
C constructor
A method
B method
C method

在这个例子中,C 类继承了 B,而 B 又继承自 Asuper() 会依次触发每个父类的构造函数和方法。首先,C 调用 super() 触发 B 的构造函数,B 的构造函数又调用 super() 触发 A 的构造函数。然后,在调用 c.method() 时,C 调用自己的 method(),而 Bmethod() 又调用 Amethod()

4. 父类没有构造函数时的行为

如果父类没有显式定义构造函数(即默认构造函数),子类仍然需要调用 super(),尽管父类的构造函数不执行任何操作。即使没有初始化逻辑,子类仍然需要调用 super() 来确保正确的继承行为。

示例:父类没有构造函数时
class A {
  // 没有显式的构造函数
}

class B extends A {
  constructor(age) {
    super();  // 必须调用 super()
    this.age = age;
    console.log('B constructor');
  }
}

const b = new B(25);

尽管 A 没有定义构造函数,子类 B 仍然需要调用 super(),以确保继承链的完整性。

总结

在 ES6 的类继承中,super() 是子类与父类之间进行交互的关键。当子类继承父类时,子类的构造函数必须显式调用 super(),否则无法访问父类的 this,并且会导致错误。通过 super.method(),子类可以调用父类的方法,继承父类的行为,并在此基础上进行扩展。对于多层继承,super() 会依次触发每一层父类的构造函数和方法。

理解和正确使用 super() 是实现类继承和子类扩展父类功能的基础。

webpack 模块 第 三 节

这部分 Module 类代码是 Webpack 构建系统中的“模块描述对象”功能实现核心,负责模块与 chunk 的关联管理、导出分析、依赖注册与清理等关键任务,支撑了模块图和 chunk 图构建、代

webpack 模块 第 二 节

核心作用总结 该类作为 Webpack 构建系统中模块表示的核心抽象,维护了从模块定义、构建信息、优化状态到 Chunk 映射等全生命周期数据。 同时提供了与 ModuleGraph 和 ChunkG
❌