使用 setTimeout 時如何處理 JavaScript 中「this」的上下文問題？

JavaScript 中的setTimeout 和「this」

在類別方法中使用setTimeout 函數時，可能會遇到錯誤，表示類別中的另一個方法（例如，所提供代碼中的“method2”）在超時後未定義。這是由於 JavaScript 在巢狀函數中處理 this 關鍵字的方式所造成的。

在範例程式碼中，使用 setTimeout 函數以指定的延遲來呼叫測試物件中的方法函數。 method2 函數在 method 函數中調用，以根據傳遞的 ID 檢索影像元素。最初，這可以正常工作。

但是，超時後，method2 函數由於 setTimeout 函數中的綁定方式而變得未定義。預設情況下，this 指的是 setTimeout 中作為回呼呼叫時的全域物件。

要解決此問題，一種解決方案是將 .bind(this) 附加到傳遞給 setTimeout 的函數末尾。這可確保 this 上下文正確綁定到物件（在本例中為測試物件）。在修改後的程式碼中：

<code class="js">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
};</code>

使用 .bind(this) 允許 method2 函數在 setTimeout 回呼中保留正確的 this 上下文，使其能夠成功檢索和操作圖像元素。

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