React类构造函数为何可以绑定定义在构造函数之后的类方法？

你产生这个疑问的核心是混淆了类的定义阶段和实例化阶段的执行顺序，实际逻辑和你想的刚好相反：

• 首先JS引擎会先完整解析整个class Toggle的代码块，把所有定义在类内部的方法（包括handleClick、render）全部挂载到Toggle.prototype（类的原型对象）上，完成整个类的结构定义，这个阶段不会执行构造函数。
• 只有类的定义全部完成后，执行new Toggle()实例化组件的时候，才会调用构造函数。此时实例this的原型链已经指向了Toggle.prototype，所以在构造函数里访问this.handleClick时，会沿着原型链找到原型上已经定义好的handleClick方法，再通过bind绑定当前实例后，赋值给实例自身的handleClick属性，后续调用就会直接走实例上已经绑定过的方法。

你可以用最简单的原生JS类测试这个逻辑，运行结果会直接打印出foo方法，证明构造函数执行时方法已经存在：

class Test {
  constructor() {
    console.log(this.foo) // 输出 [Function: foo]
  }
  foo() {}
}
new Test()

补充说明：如果是类字段写法定义的方法（比如handleClick = () => {}），逻辑也类似，类字段会在构造函数执行的最开头（super调用之后）先完成初始化，再执行你写的构造函数里的其他逻辑，同样不会出现访问不到的情况。

内容的提问来源于stack exchange，提问作者j obe