在JavaScript 中使用setTimeout 並透過this 保存上下文

在JavaScript 中使用setTimeout 函數時，必須了解它如何處理這的背景。當在超時回調中呼叫不同上下文中定義的方法時，這一點變得特別重要。

在提供的程式碼片段中，方法函數呼叫 method2，該方法根據傳遞的 ID 檢索影像元素並設定其 src 屬性。最初，method2 執行成功。但是，在 setTimeout 延遲之後，會發生錯誤，因為 method2 函數不再在預期上下文中定義。

出現問題的原因是 setTimeout 建立了一個新的執行上下文，而 this 關鍵字預設為全域物件。在提供的程式碼中，使用測試原型的上下文呼叫方法函數，但是當執行逾時回呼時，this上下文已變更為全域物件。

解決方案：

要在超時回調中保留 this 的預期上下文，您可以使用 .bind() 方法明確設定上下文的綁定。透過將 .bind(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.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

透過新增.bind(this)，回呼函數中的this關鍵字將綁定到測試原型，使得method2即使在setTimeout延遲之後也能在原型方法的上下文中正確調用。