Question

我有一个使用setTimeout函数的方法，并调用另一个方法。在初始加载方法2工作正常。但是，在超时后，我收到一条错误，指出method2未定义。我在这里做错了什么？

例如：

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 < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

Answer 1

更优雅的选择是将.bind(this)附加到函数的末尾。 E.g：

    setTimeout(function() {
        this.foo();
    }.bind(this), 1000);
//   ^^^^^^^^^^^ <- fix context

所以OP问题的答案可能是：

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

Answer 2

问题是setTimeout()导致javascript使用全局范围。从本质上讲，您正在调用method()类，而不是来自this。相反，您只是告诉setTimeout使用函数method，没有特定的范围。

要解决此问题，您可以在另一个引用正确变量的函数调用中包装函数调用。它看起来像这样：

test.protoype.method = function()
{
    var that = this;

    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";

    var callMethod = function()
    {
        that.method();
    }

    timeDelay = window.setTimeout(callMethod, 5000);
};

that可以是this，因为callMethod()在方法范围内。

当您需要将参数传递给setTimeout方法时，此问题会变得更加复杂，因为IE不支持将两个以上的参数传递给setTimeout。在这种情况下，您需要阅读closures。

此外，作为旁注，您正在设置无限循环，因为method()总是调用method()。

Answer 3

您在this中使用的setTimeOut通过自身范围界定。在t var "foo = this;"函数中创建est.prototype.method，然后使用foo。

Answer 4

在es6中你可以这样做

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

Answer 5

我收到一条错误，指出method2未定义

是的，当您从其所有者处理this.method并将该功能单独传递给setTimeout时，您将失去设置this的关联，因此this位于method() 1}}等于全局对象window。

请参阅this answer，了解this在JavaScript中实际运作的惊人方式。

JavaScript中的setTimeout和“this”

5 个答案: