爲什麼$（this）根據創建回調的方式而有所不同？

我試圖顯示一個表並導致某些操作發生，如果用戶單擊表中的單元格。我的javascript（使用jquery-3.1.1.min）看起來是這樣的：

$(function() { 

     function tdHeader(key) { 
      return '<td class="mytable-cell" data-key="' + key + '">'; 
     } 

     function clickHandler() { 
      alert("Key: " + $(this).data("key")); 
     } 

     function displayTable() { 
      var tabHTML = '<table class="mmmtab">'; 
      tabHTML += '<tr><th>Data1</th><th>Data2</th><th>Data3</th></tr>'; 
      for (var i = 0; i < 3; i++) { 
       tabHTML += '<tr>'; 
       for (var j = 0; j < 3; j++) { 
       key = i + "-" + j; 
       tabHTML += tdHeader(key) + ((i + 1) * (j + 1)) + '</td>'; 
       } 
       tabHTML += '</tr>'; 
      } 
      tabHTML += '</table>'; 
      $("#mytable").html(tabHTML); 
      $(".mytable-cell").click(clickHandler);     // Version 1 
//  $(".mytable-cell").click(function() {clickHandler();}); // Version 2 
     } 

     displayTable(); 
    });

什麼我發現是，如果我使用版本1設置回調，那麼如果我點擊一個單元格中，警報框顯示正確的密鑰。但是，如果我使用版本2，則警報框會顯示「密鑰：未定義」。

發生了什麼事情，以及爲什麼它會影響我使用哪種回調？

[假設我需要版本2，因爲我想傳遞一些本地數據到處理程序，我可以通過將$(this).data("key")作爲參數傳遞給處理程序來解決我的問題。但我仍然想知道爲什麼它會這樣做。]

來源

2016-10-11 ajb

jQuery .on將自動更改「this」以進行事件回調。在版本1中，clickHandler中的'this'將是$（「。mytable-cell」）。但在版本2中，'this'是窗口。（因爲你的事件回調調用clickHandler事件，clickHandler事件使一個新的上下文）

請嘗試：

$(".mytable-cell").click(function() {clickHandler.bind(this)();});

來源

2016-10-11 06:12:02 jiajianrong

這兩個解決方案的工作 - 謝謝。 – ajb

這將在正確的上下文中調用'clickHandler'，但不會傳遞傳遞給事件回調的參數。所以你不能訪問'clickHandler'中的'event'對象。我不會在這種情況下使用綁定，通常只有當你想要綁定一個特定的上下文到一個函數供以後使用時（比如'$（「。mytable-cell」）），你才使用'bind'。click（obj.foo。 bind（obj））'），'call'和'apply'，如果你想改變當前調用的上下文@ajb –

jQuery的調用傳遞給click事件屬於元素的上下文回調。因此對於$(".mytable-cell").click(clickHandler);，在給定DOM元素的上下文中調用clickHandler。

對於$(".mytable-cell").click(function() {clickHandler();});匿名函數在DOM元素的上下文中調用，在此內部，您可以在undefined或全局對象的上下文中調用clickHandler。

如果您希望行爲相同，您需要編寫$(".mytable-cell").click(function() { return clickHandler.apply(this, arguments); });。

來源

2016-10-11 06:12:47

這兩個解決方案的工作 - 謝謝。 – ajb

我發現使用'.call'而不是'.apply'也可以，不同之處在於'.apply（）'需要兩個參數，第二個參數是一個參數數組，而'.call'接受任何數量的參數。 – ajb

爲什麼$（this）根據創建回調的方式而有所不同？

回答

相關問題