為什麼在 JavaScript 巢狀函數中使用 `var that = this;`？

'var that = this;' 的作用是什麼？語法 在 JavaScript 中完成？

在 JavaScript 中，常常會遇到類似以下的程式碼區塊：

function Somefunction(){
   var that = this; 
   ... 
}

此語法將 this 的值指派給名為 that 的變數。這個習慣用法的目的是在巢狀函數中保留對正確 this 上下文的參考。

為了說明這一點的必要性，請考慮以下範例：

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

在匿名函數中傳遞給forEach 時，this 關鍵字不再引用點擊的元素，因為它的範圍已更改。將 this 分配給 that 可以讓我們在巢狀函數中保留所需的引用。

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

實際上，為此使用更具描述性的別名有利於增強程式碼可讀性。例如，在上面的例子中，clickedEl將是一個更合適的選擇。

以上是為什麼在 JavaScript 巢狀函數中使用 `var that = this;`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！