JS中关于子类构造函数中为什么一定要调用super()的解读

在JavaScript的类继承机制中，super() 是子类构造函数中必须调用的一个特殊函数。要理解为什么必须调用它，需要从JavaScript的原型链、继承以及类的构造过程来讲解。

背景知识：类和继承

JavaScript中的类其实是基于原型链的语法糖。在ES6之前，JavaScript的继承是通过函数构造器和原型链实现的。ES6引入了class关键字，使得继承的语法更加直观，但底层依旧是基于原型链。

当一个类继承自另一个类时，子类不仅仅继承了父类的属性和方法，还会保留父类的构造逻辑。这意味着子类在构造对象时，父类的构造函数也需要被执行，以确保继承的属性正确初始化。

解释 super() 的作用

当子类继承父类时，子类的构造函数需要做两件事：

1. 初始化子类特有的属性：子类构造函数可能定义一些与父类不同的属性或逻辑。
2. 调用父类的构造函数：父类的构造函数可能做了一些重要的初始化工作，子类必须继承和调用这些逻辑。

构造函数的工作机制

在 JavaScript 中，如果你定义一个类并且没有显式定义构造函数，JS引擎会自动生成一个默认的构造函数。这个构造函数会自动调用父类的构造函数。

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  // 默认构造函数
  constructor(name, age) {
    // 等价于 super(name); 
    // 子类构造函数的第一步必须是调用父类构造函数
    this.age = age;
  }
}

为什么必须调用 super()？

1. this 的初始化: 在 ES6 中，子类中的 this 只有在 super() 调用之后才会被初始化。这是因为父类的构造函数负责对继承的属性进行初始化。若你没有调用 super()，JavaScript 就不知道如何为子类创建的对象初始化父类的属性，因此 this 还未被分配。在调用 super() 之前访问 this 会导致运行时错误。

2. 确保父类的初始化逻辑执行：父类的构造函数可能定义了初始化代码，设置父类的私有变量或做其他重要的逻辑。调用 super() 确保这些逻辑在子类构造函数执行之前被正确运行。例如，如果父类构造函数初始化了一些状态变量，子类依赖这些状态，那么就必须调用 super() 来完成这部分逻辑。

super() 内部发生了什么？

在调用 super() 时，实际上是调用了父类的构造函数，并且将子类实例的 this 传递给了父类的构造函数。这里牵涉到一些复杂的底层机制：

1. 绑定 this: 在调用 super() 之后，子类中的 this 对象被正确初始化为父类的实例，并绑定到当前子类的上下文中。
2. 调用父类构造函数: super() 实际上是一个对父类构造函数的引用，所以 super() 会执行父类的构造逻辑，将子类实例的 this 对象传入。

可以简单理解为，super() 是一种在子类中调用父类构造函数的桥梁，它不仅为子类继承父类的属性和方法提供了机制，还确保了父类的初始化逻辑得以执行。

示例代码

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

class Dog extends Animal {
  constructor(name, breed) {
    // 这一步必须要执行，否则会报错
    super(name);  // 调用父类构造函数并传递参数
    this.breed = breed;
    console.log('Dog constructor');
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');

在上面的代码中，super(name) 调用了 Animal 类的构造函数，并将 name 传递给了它。如果你注释掉 super(name) 这一行代码，Dog 构造函数就无法正确执行，this 也不会被正确初始化，导致代码报错。

不调用 super() 的后果

如果子类没有调用 super()，那么在子类构造函数中对 this 的任何引用都会报错。原因在于，this 只有在父类构造函数完成后才能被初始化。如果子类没有继承父类，也就不需要调用 super()，这仅在子类继承的情况下强制要求。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // 没有调用 super()，会导致错误
    this.breed = breed;  // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
  }
}

总结

• super() 是子类构造函数中调用父类构造函数的必要手段。
• 在子类中，必须调用 super() 以初始化 this，并确保父类的构造逻辑正确执行。
• super() 通过将子类的 this 传递给父类构造函数，实现了子类对父类属性和方法的继承。

这个机制是为了确保继承的类能够正确初始化并且保持一致的初始化流程，从而保证类和实例的行为是可预测的。