setTimeout 和 JavaScript 中难以捉摸的“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, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i  1) {
            return document.images[i];
        }
    }
};

在初始页面加载时，method2 函数按预期工作。但是设置超时后，后续调用method2会报错，提示未定义。

解决方案：

核心问题在于setTimeout的处理方式这个关键字。使用 setTimeout(this.method, 5000) 设置超时时，上下文会丢失，从而导致错误。

解决此问题的一个巧妙方法是使用 bind() 方法。通过在方法调用末尾附加“.bind(this)”，可以显式绑定上下文，确保即使在超时后也能保持正确的“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
};

通过此修改，“this”的上下文被正确绑定，允许 method2 在超时到期后继续按预期运行。这种方法在保留正确的执行上下文方面既优雅又有效。