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