混淆 - 綁定「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

回答

相關問題