为什么这是jQuery事件处理程序中的window对象？

Question

我有一个小的加载脚本来设置一些看起来像这样的类：

function frameIt() {
  console.log("called frameit")
  $( 'img' ).on('load', () => {
    console.log("running listener")
    debugger;
    $( this ).addClass( "tasty" );
  });
  console.log("set listener")
}

我的问题是$(this)始终设置为window，即使上下文中的this是Chrome的调试器显示的加载的img标记。为什么会发生这种情况的任何想法？这是Chrome调试器屏幕截图：

Answer 1

这是因为箭头函数不会绑定自己的this上下文 - 它们会获取封闭范围的this值。由于jQuery在内部绑定事件处理程序this，但this无法绑定到箭头函数，this引用window，因为它是{{1}封闭范围的值。改为使用常规功能。

Answer 2

$( 'img' ).on('load', function () {
    console.log("running listener")
    debugger;
    $( this ).addClass( "tasty" );
});