如何在「setTimeout」回呼中維護正確的「this」上下文？

確保 setTimeout 回呼中正確的 this 上下文

當使用 setTimeout 安排回呼函數時，請確保該函數保留所需的上下文。但是，當 this 引用回呼中的全域物件時，就會出現問題。

在提供的範例中：

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }, 1000);
}

this 引用全域窗口，而不是預期物件。為了防止這種情況，有幾種方法：

1. 儲存上下文：

在呼叫 setTimeout 之前儲存對目前上下文的參考。

var that = this;
if (this.options.destroyOnHide) {
     setTimeout(function(){ that.tip.destroy() }, 1000);
}

2. 使用bind方法(ES5):

使用 bind 建立一個綁定到正確上下文的新函數。

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }.bind(this), 1000);
}

3. 使用箭頭函數 (ES6 ):

箭頭函數自動從其詞法繼承 this值

if (this.options.destroyOnHide) {
     setTimeout(() => { this.tip.destroy() }, 1000);
}

4. 將參數傳遞給回調（HTML5）：

HTML5 的計時器允許將參數傳遞給回調。

if (this.options.destroyOnHide) {
     setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

請記住，this 的上下文可能會根據函數的呼叫方式而有所不同。為了確保所需的行為，請根據可用的語言功能考慮適當的方法。

以上是如何在「setTimeout」回呼中維護正確的「this」上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！