困惑 - 绑定“this”和闭包 - JavaScript答案

【问题标题】：Confused - Binding "this" & closures - JavaScript困惑 - 绑定“this”和闭包 - JavaScript
【发布时间】：2016-05-01 01:17:56
【问题描述】：

我正在用 JavaScript 阅读 this 上的精彩 article。作者说下面的代码不好：

Cart = {
  items: [1,4,2],
  onClick: function () {
    // Do something with this.items.
  }
}
$("#mybutton").click(Cart.onClick);

他说click 事件在调用 onClick 时不知道Cart 对象，因此this.items 不会是我期望的[1,4,2] 数组。

作者接着说这段代码创建了一个闭包并修复了它，但我不明白下面的代码是如何解决这个问题的。

$("#mybutton").click(function () { Cart.onClick() });

1) 如果我们使用第一个示例，this 在什么情况下（如果不是Cart）会发生什么。

2) 为什么第二个例子解决了这个问题？

【问题讨论】：

@JonathanLonowski：为什么不回答这个问题呢？ :)
我建议阅读以下来源：github.com/getify/You-Dont-Know-JS/blob/master/…, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。当你理解this，你就会理解这些例子。

【解决方案1】：

“How does the “this” keyword work?”中提供了有关this 的一些详细信息

但是，重要的部分是this 的值取决于何时以及如何调用function。

通过将方法本身作为参数传递，从对象访问它并调用它成为单独的行为。这种分离是它如何失去对它来自的对象的跟踪 - Cart。

调用由 jQuery 执行。而且，对于事件处理程序，it determines the value of this to be the referenced element（在这种情况下与 $("#mybutton") 匹配）：

当 jQuery 调用处理程序时，this 关键字是对正在传递事件的元素的引用； [..]

这不是传递方法本身，而是为 jQuery 调用提供了一个替代的包装函数。在该函数的主体中，访问该方法并调用它被组合在一个语句中。

将它们组合在一起，语言本身将 this 的值确定为函数之前的（最后一个）Object – Cart。

【讨论】：

【解决方案2】：

this 始终是函数调用的上下文。这就是$("#mybutton").click(Cart.onClick); 将 mybutton 对象作为this 发送给函数的原因。在第二个示例中，您在自己的上下文中调用Cart.onClick()； this 是 Cart。

您可以像这样修复第一个示例：$("#mybutton").click(Cart.onClick.bind(Cart)); 将上下文强制为 Cart 对象。

如果你尝试<button onclick="Cart.onClick()...，那么this 就是windows 对象。

希望我的解释对你有帮助。

【讨论】：