javascript - 为什么我们能够在 React 组件的构造函数中绑定(bind)函数？

Question

我们听说当一个类组件被初始化时，构造函数是第一个被调用的函数，然后在构造函数中我们如何能够访问并绑定(bind)到类中稍后定义的函数 即问，为什么我们能够在构造函数内部访问 this.fn？

import React from 'react';
class A extends React.Component {
  constructor(props){
    super(props);
    this.a = 1;
    this.fn = this.fn.bind(this);
  }
  fn(){
    console.log(this.a);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

class 声明本身是构造函数声明和构造函数原型(prototype)对象初始化的“漂亮”包装器。 (还有一些其他功能，但就我们的目的而言，就是这样。)

因此 class 代码本身代表可执行代码，而不仅仅是静态声明。因此，原型(prototype)对象在实际调用构造函数之前被初始化。当调用构造函数时，原型(prototype)属性(如您的 fn() 方法)就可以使用了。