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