React 元件為什麼要在 constructor 寫 this.XXX = this.XXX.bind(this) ？？

class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }

沒寫的話，如果是在函式裡面呼叫 XXX 是沒問題，但如果是在 element 的 event callback 呼叫，就會出問題。

是因為 prototype chain 上面 this 的對象有差別吧？具體來說是差在哪邊？

https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

有一些 Implicit binding 的行為

有一些 Explicit Hard Binding 的行為

於是

the event handler method loses its implicitly bound context. When the event occurs and the handler is invoked, the this value falls back to default binding and is set to undefined , as class declarations and prototype methods run in strict mode.

When we bind the this of the event handler to the component instance in the constructor, we can pass it as a callback without worrying about it losing its context.

Arrow functions are exempt from this behavior because they use lexical this binding which automatically binds them to the scope they are defined in.