React 绑定中的 this 关键字答案

【问题标题】：This keyword in Binding at ReactReact 绑定中的 this 关键字
【发布时间】：2019-02-01 11:18:37
【问题描述】：

class App extends Component {
constructor(props) {
    super(props);
    this.addContact = this.addContact.bind(this);
    console.log(this);
}

我不明白括号中最后一个'this'关键字的含义是什么。它代表什么？我知道当我想使用方法时我应该绑定。但是我在构造函数中绑定了什么？我没有向构造函数发送任何对象或其他东西，所以那里发生了什么？

我是一个自学成才的新手程序员，正在努力解决这个问题。你能帮帮我吗？

提前谢谢你。

【问题讨论】：

【解决方案1】：

什么代表this里面的bind()函数

this对应你的代码，在你的班级App

如果您的方法 addContact 它没有绑定到 App 类的上下文中，那么您无法使用此方法进行任何操作。

如果您的方法不需要this 上下文，也许您可以将此方法转换为静态方法。

请看这个例子：MDN EXAMPLE

【讨论】：

【解决方案2】：

代码中的某处，例如在render 方法中，您将以某种方式调用此函数，例如onClick={this.addContact}。

this.addContact = this.addContact.bind(this); 代码将保证addContact 函数将在this 的范围内被调用（App 实例，不在Button 的范围内，例如onClick 处理程序）。

【讨论】：

这并不完全正确，因为您不需要事件处理程序来绑定方法。例如：你一个方法叫A，第二个叫B，这两个方法使用了this上下文的绑定，方法B会在方法A中被调用。也许，如果你不绑定这两个方法，你不能将 B 称为 A :)
我同意，“保证”在这里不是一个正确的词。但我希望使用 .bind(this) 的主要思想是明确的。