如何在 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中文网其他相关文章！