困惑 - 绑定＆＃34;这＆＃34; ＆安培;闭包 - JavaScript

Question

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

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

他说{​​{1}}事件在调用onClick时并不知道click对象，因此Cart不会成为this.items数组我希望它是。

作者继续说这段代码会创建一个闭包并修复它，但我不明白以下代码如何解决问题。

[1,4,2]

1）如果我们使用第一个例子，在什么情况下（如果不是$("#mybutton").click(function () { Cart.onClick() }); ）Cart我们就会进入。

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

Answer 1

＆{34> How does the “this” keyword work? ＆＃34;

中提供了有关this的一些详细信息

但重要的是，this的值是根据function的调用时间和方式确定的。

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

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

  

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

1. 这不是传递方法本身，而是为jQuery提供了一个替代的包装函数来代替调用。在该函数体内，访问该方法并将其调用合并为一个语句。

   将它们合并后，语言本身会将this的值确定为函数前的（最后一个）Object - Cart。

Answer 2

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

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

如果您尝试<button onclick="Cart.onClick()...，则this为windows对象。

我希望我的解释可以帮助你。