构造函数代码不可访问答案

【问题标题】：Constructor code not reachable构造函数代码不可访问
【发布时间】：2018-09-10 23:26:41
【问题描述】：

我将一个类方法作为参数传递给一个新的类实例化，如下所示：

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

我在浏览器控制台中得到“无法读取未定义的属性 a”。为什么a undefined 在b = new Def(this.a) 里面？在调试时，我发现浏览器会抛出错误并且永远无法到达构造函数代码。为什么会这样？

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

【问题讨论】：

为我工作babeljs.io/repl/…
您能否重新创建一个工作示例来演示该问题？
我无法发布确切的代码，因为我正在使用阻止发布到 stackoverflow 的远程计算机。但是，我意识到问题在于初始化相关变量。从问题的上下文来看，我在Abc 的constructor 中初始化a，例如this.a = () => {}。我在调试时发现程序并没有奇怪地没有进入constructor，所以this.a=...永远不会被执行，因此this.a是未定义的。但我不明白为什么构造函数代码没有被执行？已修改相关代码以反映这一点。

【解决方案1】：

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

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

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

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

constructor() {}

【讨论】：

感谢您的澄清。但是，在我的代码中，函数a 使用了在创建Abc 的新实例时传递的一些值，因此我只能在构造函数中捕获它，因此代码this.a = () => { }; 只能在构造函数中。跨度>
或者有什么办法解决这个问题？
然后将 b = new Def(this.a) 移动到构造函数主体。类字段只是构造函数代码的语法糖。
我刚试过这个，我看到构造函数代码在类字段被解析之前就已经运行了。看看这个：jsfiddle.net/dk49/qr2a6945/4
不，不是。 this.x 在构造之后使用（y.a() 调用），因此定义 x 和 a 的顺序无关紧要。如果您不确定发生了什么，检查转译器输出总是有帮助的，babeljs.io/repl/…