异步使用 setTimeout 时如何保留 JavaScript 中“this”的上下文？

setTimeout 和 JavaScript 中难以捉摸的“this”

在 JavaScript 中使用 setTimeout 函数时，遇到的一个常见问题是“this”关键字。当包含 setTimeout 调用的方法引用另一个方法，但在超时期限之后，引用的方法变得未定义时，就会出现这种情况。

此问题源于 setTimeout 的操作方式。当函数作为参数传递给 setTimeout 时，该函数内“this”的上下文就会丢失。这是因为 setTimeout 会异步执行该函数，到那时，“this”的原始上下文可能无法再访问。

要解决此问题，有两种常见的解决方案：

1.使用bind()方法

bind()方法可用于在传递给setTimeout的函数中保留“this”的上下文。通过将“.bind(this)”附加到函数末尾，可以显式保留上下文，如以下示例所示：

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2.箭头函数

箭头函数自动将“this”绑定到周围的上下文。因此，不需要额外的步骤来维护传递给 setTimeout 的回调函数中的正确上下文：

setTimeout(() => {
    this.foo();
}, 1000);

将这些技术应用于提供的代码片段，可以通过修改代码来解决问题，如下所示：

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

以上是异步使用 setTimeout 时如何保留 JavaScript 中“this”的上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！