混淆 - 绑定“this”＆关闭 - JavaScript

我正在阅读一个很棒的article在this在JavaScript中。作者说，下面的代码是坏：混淆 - 绑定“this”＆关闭 - JavaScript

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

他说，click事件并不了解Cart对象调用的onClick时，因此this.items不会是[1,4,2]阵列，我希望它是。

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

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

1）在什么情况下（如果不是Cart）做this事情我们是在如果我们使用的第一个例子。

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

来源

2016-05-01 inthenameofmusik

@JonathanLonowski：为什么不做出答案？ :) –

我推荐阅读以下资源：https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch1.md，https：// developer .mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this。当你理解这个''，你会明白这些例子。 –

约this一些好的详细“How does the “this” keyword work?”

给出，但是重要的部分是，this值被确定时，由function如何调用和。

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

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

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

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

将它们组合起来，语言本身决定了this的值作为函数之前的（last）Object - Cart。

来源

2016-05-01 01:49:44

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

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

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

我希望我的解释能帮助你。

来源

2016-05-01 02:05:58

混淆 - 绑定“this”＆关闭 - JavaScript

回答

相关问题