为什么在 super() 之前不允许这样做

Question

我一直在使用 React js 进行编码。我已经读过在 ES6 类中访问“this”，我们需要首先调用 super(props)，我想知道为什么会这样。我发现的答案主要是关于 Javascript 无法知道“this”是什么，除非超类叫做。我想知道这意味着什么，因为在构造函数之外，“this”被识别，我们不会每次都调用 super(props)。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

Answer 1

不幸的是，这真的很复杂。

---

短篇小说：在super()调用之前不允许在子类中访问this，因为在ES6中this是在基类中诞生的，因此super()是需要初始化它。

有关详细信息，请参阅15.6.2 Allocating and initializing instances¹。作者是少数详细解释这一点的人之一。

以下是上述书籍¹中的相关示例。

在引擎盖下，它大致如下所示。

// Base class: this is where the instance is allocated
function Person(name) {
    // Performed before entering this constructor:
    this = Object.create(new.target.prototype);

    this.name = name;
}
···

function Employee(name, title) {
    // Performed before entering this constructor:
    this = uninitialized;

    this = Reflect.construct(Person, [name], new.target); // (A)
        // super(name);

    this.title = title;
}

Answer 2

构造函数默认返回'this'。根据 oops 概念，子类总是通过 super() 调用从父类继承“this”对象。因此，如果我们尝试在没有 super 调用的子类中使用它，它将引发错误。 如果我们从子类返回除 'this' 之外的任何内容，则不需要调用 super()。 我已经通过一些简单的例子进行了解释。

示例 1

class A {
  constructor() {
    this.a = 0;
  }
}

class B extends A {
    constructor() {
        console.log(this);
    }
}
const instanceA = new A();
console.log(instanceA) // A {a: 0}
const instanceB = new B();
console.log(instanceB) // Error: Must call super constructor in derived class before 
accessing 'this' or returning from derived constructor 

示例 2

class A {
  constructor() {
    this.a = 0;
  }
}

class B extends A {
    constructor() {
      return {b: 3}
    }
}
const instanceA = new A();
console.log(instanceA) // A {a: 0}
const instanceB = new B();
console.log(instanceB) // Object {b: 3}

示例 3

class A {
  constructor() {
    this.a = 0;
  }
}

class B extends A {
    constructor() {
      super()
    }
}

const instanceB = new B();
console.log(instanceB) // B {a: 0}

Answer 3

构造方法是一种特殊的方法，用于创建和初始化一个用类创建的对象。一个类中只能有一个名为“constructor”的特殊方法。如果类包含多次出现的构造函数方法，则会抛出 SyntaxError。构造函数可以使用 super 关键字调用父类的构造函数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

这意味着如果你有class MyComponent extends React.Component，你总是需要super() 来定义它。

如果不指定构造方法，则使用默认构造方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor#Default_constructors

父类的构造函数应该在this之前调用，以便在子类开始配置this之前完成this的配置。否则超类构造函数可能会得到子类修改的this。超类不应该对子类有所了解。这就是为什么在构造函数中调用super() 应该在访问this 之前。