如何在 JavaScript 的 `setTimeout` 回呼中保留上下文？

使用setTimeout 回呼時保留上下文

在JavaScript 中使用setTimeout 時，將適當的上下文傳遞給其回調函數可能至關重要。例如，假設您希望在 1000 毫秒後呼叫 this.tip.destroy() 方法，前提是 this.options.destroyOnHide 為 true。然而，使用此方法會導致 this 引用全域視窗物件。

保留上下文的解決方案

在JavaScript 的發展過程中，出現了各種方法來解決此上下文問題：

• 綁定上下文(ES5): ES5 中引入的bind()方法可讓您使用預先定義的this 值建立新函數，防止全域this 潛入：

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

• 箭頭函數(ES6)： 箭頭函數透過消除其自身的this 值的概念來簡化此過程。當在箭頭函數中存取 this 時，它會繼承其周圍範圍的 this 值：

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

• 將上下文作為參數傳遞（HTML5）： HTML5引入一種標準化方法，涉及將上下文作為參數傳遞給回調function:

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

透過採用其中一種技術，您可以在使用setTimeout 回調時有效地保留所需的上下文，確保您的程式碼按預期運行。

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