爲什麼這是jQuery事件處理程序中的窗口對象？

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被加載img標籤Chrome的調試器顯示。任何想法爲什麼發生這種情況？這裏是一個Chrome的調試器的截圖：

Answer 1

這是因爲箭頭功能不綁定自己的this背景 - 他們採取封閉範圍的this值。由於jQuery在內部綁定事件處理程序的this，但this不能綁定到箭頭函數，所以this參考window，因爲它是封閉範圍的this值。改用常規功能。

Answer 2

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