具有箭头函数的事件处理程序如何实现上下文绑定

我了解一般理论this绑定（函数调用站点重要，隐式、显式绑定等）以及解决 React 中此绑定问题的方法，因此它始终指向我想要的内容this是（在构造函数、箭头函数等中绑定），但我正在努力获取内部机制。

看一下这两段代码：

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={(e) => this.goToStore(e)}>test</button>
  }
}

vs.

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={this.goToStore}>test</button>
  }
}

我所知道的是：

• 在这两个版本中，我们都在 goToStore 方法中成功结束，因为this在 - 的里面render()方法自动绑定（通过 React）到组件实例
• 第一个成功因此，
• 第二个失败，因为es6中的类方法没有绑定到组件实例，因此解决了this在方法中undefined

据我所知，理论上在第一个版本中会发生以下情况：

1. 按钮点击处理程序是匿名的arrow函数，所以每当我引用this在它里面，它拾起this来自环境（在本例中来自render())
2. 然后它调用goToStore方法，这是一个常规函数。
3. 因为调用似乎符合隐式绑定的规则（object.function()) object将是上下文对象，在此类函数调用中它将用作this
4. 所以，在里面goToStore词法上拾取的 this（用作上下文对象）的方法将正确解析为组件实例

我觉得 3. 和 4. 不是这里的情况，因为这样它就适用于 2. 情况：

<button onClick={this.goToStore}>test</button>

还带有this上下文对象。

在这个特殊情况下，一步一步究竟发生了什么？

正如 MDN 文档所述

箭头函数没有自己的 this；的这个值 使用封闭的执行上下文

所以你会想到

onClick={(e) => this.goToStore(e)}

作为一个匿名函数，可以写成

    (e) => { 
         return this.goToStore(e) 
    }

现在在这个匿名函数中this指的是渲染函数的词法上下文，而渲染函数又指的是 React 类实例。

Now

Context通常由函数的调用方式决定。当函数作为对象的方法被调用时，this 被设置为调用该方法的对象：

var obj = {
    foo: function() {
        return this;   
    }
};

obj.foo() === obj; // true

当使用 new 运算符调用函数来创建对象的实例时，同样的原则也适用。当以这种方式调用时，函数范围内的 this 值将被设置为新创建的实例：

function foo() {
    alert(this);
}

foo() // window
new foo() // foo

当作为未绑定函数调用时，这将默认为浏览器中的全局上下文或窗口对象。

所以这里因为该函数被称为this.goToStore()其中的 this 将引用 React 组件的上下文。

然而当你写onClick={this.goToStore}，该函数没有执行，但它的引用被分配给 onClick 函数，然后该函数稍后调用它，导致this当函数在函数的上下文中运行时，函数内部未定义window object.

现在尽管onClick={(e) => this.goToStore(e)}每当调用 render 时都会创建一个新的函数实例。在您的情况下，很容易避免，只需使用箭头函数语法创建函数 goToStore 即可。

goToStore = (e) => {

}

检查文档以获取更多详细信息this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this