在 JavaScript 中使用 setTimeout 時如何保留「this」引用？

setTimeout 和JavaScript 中難以捉摸的「this」

開發者在使用setTimeout 函數時，經常會遇到後續呼叫方法遺失的問題他們的預期上下文，導致看似未定義的方法。這通常是由於丟失“this”引用引起的。

問題：

考慮以下程式碼：

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

On初始頁面載入時，method2 函數如預期運作。但是設定逾時後，後續呼叫method2會報錯，提示未定義。

解決方案：

核心問題在於setTimeout的處理方式這個關鍵字。使用 setTimeout(this.method, 5000) 設定逾時時，上下文會遺失，從而導致錯誤。

解決此問題的一個巧妙方法是使用 bind() 方法。透過將“.bind(this)”附加到方法呼叫的末尾，可以明確綁定上下文，確保即使在逾時後也能保持正確的“this”引用。

改進的程式碼:

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

透過此修改，「this」的上下文被正確綁定，允許method2 在超時到期後繼續按預期運行。這種方法在保留正確的執行上下文方面既優雅又有效。

以上是在 JavaScript 中使用 setTimeout 時如何保留「this」引用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！