Javascript 为什么$（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();
    });

$（函数（）{
函数tdHeader（键）{
返回“”；
}
函数clickHandler（）{
警报（“键：+$（此）.data（“键”）；
}
函数displayTable（）{
var tabHTML=''；
tabHTML+='Data1Data2Data3'；
对于（变量i=0；i<3；i++）{
tabHTML+=''；
对于（var j=0；j<3；j++）{
键=i+“-”+j；
tabHTML+=tdHeader（key）+（（i+1）*（j+1））+''；
}
tabHTML+=''；
}
tabHTML+=''；
$（“#mytable”）.html（tabHTML）；
$（“.mytable单元格”）。单击（clickHandler）；//版本1
//$（“.mytable单元格”）。单击（函数（）{.clickHandler（）；}）；//版本2
}
displayTable（）；
});

我发现，如果使用版本1设置回调，然后单击单元格，警报框将显示正确的键。但是，如果我使用版本2，警告框会显示“键：未定义”

发生了什么，为什么我使用哪个回调会有不同

---

[假设我需要版本2，因为我想将一些本地数据传递给处理程序，我可以通过将

$（this）.data（“key”）

作为参数传递给处理程序来解决我的问题。但我仍然想知道它为什么要这样做。]

jQuery.on将自动更改事件回调的“this”。 在版本1中，clickHandler中的“this”将是$（“.mytable单元格”）。 但在版本2中，“这”是一个窗口。（因为您的事件回调调用clickHandler，clickHandler生成一个新上下文）

请尝试：

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

---

on将自动更改事件回调的“this”。 在版本1中，clickHandler中的“this”将是$（“.mytable单元格”）。 但在版本2中，“这”是一个窗口。（因为您的事件回调调用clickHandler，clickHandler生成一个新上下文）

请尝试：

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

---

jQuery在事件所属元素的上下文中调用传递给

click

的回调。所以对于

$（“.mytable单元格”）。单击（clickHandler）

在给定DOM元素的上下文中调用

clickHandler

对于<代码>$（“.mytable单元格”）。单击（函数（）{clickHandler（）；}）在DOM元素的上下文中调用匿名函数，在DOM元素的上下文中，在

未定义的
或全局对象的上下文中调用
clickHandler

您需要编写
$（“.mytable单元格”）。单击（函数（）{return clickHandler.apply（this，arguments）；}）如果希望行为相同。
jQuery在事件所属元素的上下文中调用传递给
的回调。所以对于
$（“.mytable单元格”）。单击（clickHandler）
在给定DOM元素的上下文中调用
clickHandler

对于<代码>$（“.mytable单元格”）。单击（函数（）{clickHandler（）；}）
在DOM元素的上下文中调用匿名函数，在DOM元素的上下文中，在
未定义的
或全局对象的上下文中调用
clickHandler

您需要编写
$（“.mytable单元格”）。单击（函数（）{return clickHandler.apply（this，arguments）；}）
如果希望行为相同。
这将在正确的上下文中调用
clickHandler
，但不会传递传递给事件回调的参数。因此，您无法访问
clickHandler
中的
事件
对象。在这种情况下，我不会使用bind，通常只有当您希望将特定上下文绑定到函数以供以后使用时（例如，
$（“.mytable cell”）。才使用
bind
。单击（obj.foo.bind（obj））
，和
call
和
apply
如果要更改当前调用@ajbt的上下文，则此操作将在正确的上下文中调用
clickHandler
，但不会传递传递给事件回调的参数。因此，您无法访问
clickHandler
中的
事件
对象。在这种情况下，我不会使用bind，通常只有当您希望将特定上下文绑定到函数以供以后使用时（例如，
$（“.mytable cell”）。才使用
bind
。单击（obj.foo.bind（obj））
，和
call
和
apply
如果您想更改当前调用@ajbI的上下文，您发现使用
.call
而不是
.apply
也可以，区别在于
.apply（）
需要两个参数，第二个是一组参数，而
.call
可以接受任意数量的参数。我发现使用
.call
而不是
.apply
也可以，区别在于
.apply（）
需要两个参数，第二个是参数数组，而
.call
可以接受任意数量的参数。