在 JavaScript 中使用 setTimeout 并通过 this 保存上下文

在 JavaScript 中使用 setTimeout 函数时，必须了解它如何处理这的背景。当在超时回调中调用不同上下文中定义的方法时，这一点变得特别重要。

在提供的代码片段中，方法函数调用 method2，该方法根据传递的 ID 检索图像元素并设置其 src 属性。最初，method2 执行成功。但是，在 setTimeout 延迟之后，会发生错误，因为 method2 函数不再在预期上下文中定义。

出现问题的原因是 setTimeout 创建了一个新的执行上下文，而 this 关键字默认为全局对象。在提供的代码中，使用测试原型的上下文调用方法函数，但是当执行超时回调时，this上下文已更改为全局对象。

解决方案：

要在超时回调中保留 this 的预期上下文，您可以使用 .bind() 方法显式设置上下文的绑定。通过将 .bind(this) 附加到传递给 setTimeout 的函数末尾，您可以确保回调函数中的 this 引用预期的上下文。

更新的代码片段中：

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
};

通过添加.bind(this)，回调函数中的this关键字将绑定到测试原型，使得method2即使在setTimeout延迟之后也能在原型方法的上下文中正确调用。