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

使用「this」在setTimeout 回呼中保留上下文

當使用setTimeout 安排延遲後的回呼時，通常想要來自存取呼叫setTimeout 的函數的上下文。但是，重要的是要注意 setTimeout 執行回呼時「this」指向全域對象，如果您的回呼引用實例成員，這可能會導致意外行為。

要解決此問題，有幾種方法方法：

1。儲存對上下文的引用：

最直接的解決方案是在呼叫 setTimeout 之前保存對正確上下文的引用。然後可以將此參考作為參數傳遞給回調函數。

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

2.使用bind方法（ES5）：

bind方法可用來建立一個具有預先決定的「this」值的新函數。這樣就無需手動儲存上下文的引用。

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

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

箭頭函數沒有自己的「this」值。相反，它們從封閉的詞法範圍繼承“this”值。這使得它們非常適合在回調中保留上下文。

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

4.將上下文作為參數傳遞（ES5）：

在 HTML5 中，您可以將參數傳遞給 setTimeout 的回呼函數。這允許您明確指定要使用的上下文。

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

透過了解這些方法，您可以在 setTimeout 回調中有效維護正確的上下文並避免意外行為。

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