非同步使用 setTimeout 時如何保留 JavaScript 中「this」的上下文？

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

在JavaScript 中使用setTimeout 函數時，遇到的一個常見問題是「 this”關鍵字。當包含 setTimeout 呼叫的方法引用另一個方法，但在逾時期限之後，引用的方法變得未定義時，就會發生這種情況。

此問題源自於 setTimeout 的操作方式。當函數作為參數傳遞給 setTimeout 時，該函數內「this」的上下文就會遺失。這是因為 setTimeout 會非同步執行該函數，到那時，「this」的原始上下文可能無法再存取。

要解決這個問題，有兩種常見的解決方案：

1.使用bind()方法

bind()方法可用於在傳遞給setTimeout的函數中保留「this」的上下文。透過將「.bind(this)」附加到函數末尾，可以明確保留上下文，如下例所示：

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2.箭頭函數

箭頭函數自動將「this」綁定到周圍的上下文。因此，不需要額外的步驟來維護傳遞給setTimeout 的回呼函數中的正確上下文：

setTimeout(() => {
    this.foo();
}, 1000);

將這些技術應用於提供的程式碼片段，可以透過修改程式碼來解決問題，如下所示：

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
};

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