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  1) {
            return document.images[i];
        }
    }
};

在初始頁面載入時，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 在超時到期後繼續按預期運行。這種方法在保留正確的執行上下文方面既優雅又有效。