javascript - 在 React 应用程序的这个示例中，bind(this) 到底做了什么？

Question

这个问题已经有答案了:

Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class (5 个回答)

已关闭 3 年前。

我不太清楚 .bind(this) 的作用是什么？这个例子中到底在做什么？它是否只是将指定的函数连接到代码的其他组件，例如 this.state ？

constructor(props) {
   super(props);
   this.state = {
      input: '',
      messages: []
   }
   this.handleChange = this.handleChange.bind(this);
   this.submitMessage = this.submitMessage.bind(this);
}

Answer 1

“bind”方法用于在触发时将上下文(例如“this”)传递给 javascript 函数。

在本例中， react 组件的“this”传递给构造函数中的“handleChange”方法，
因此，当调用“handleChange”时，如果在其代码中使用“this”，“this”将获取父组件的值。

handleCahnge() {
  this.sendSomethingToServer(); // this is react component
}

否则，(不使用“绑定(bind)”)如果某个事件触发了该函数，则上下文将是事件的上下文(这将是事件目标元素而不是组件)

如果使用箭头函数语法，则可以避免使用“绑定(bind)”语法:

handleCange = () => { this.sendSomethingToServer() };