无法访问构造函数代码

Question

我正在将 class 方法作为参数传递给新的 class 实例化，如下所示：

class Abc {
    constructor() {
        this.a = () => { };
    }
    b = new Def(this.a);
}

我在浏览器控制台中得到 'cannot read property a of undefined'。为什么 a undefined 在 b = new Def(this.a) 里面？在调试时，我发现浏览器抛出错误并且从未到达构造函数代码。为什么会这样？

注意：我使用的是 babel，所以我可以使用 class 字段，因此 b = new Def() 是这里的有效语法。

Answer 1

这就是 class 字段的工作方式，它们在构造函数主体之前（但在 super() 之后）进行评估。第 1 行在第 2 行之前求值，构造函数和 b 字段的排序顺序无关紧要：

constructor() {
    this.a = () => { }; // 2
}
b = new Def(this.a); // 1

由于 class 字段已经在使用中，为了保持正确的执行顺序，它应该是：

a = () => { }; // 1
b = new Def(this.a); // 2

constructor() {}

Constructor code not reachable