javascript - 在 setTimeout 中传递 this.method 不起作用？

Question

我发现将对象方法作为参数传递给 setTimeout 时出现问题。我知道在嵌套函数中，需要手动设置 this 的范围，但是如果我直接传递函数对象会怎样，在我的例子中是 this.counting。声明匿名函数作为第一个参数的需要是什么，this.counting 已经是一个函数。

Mozilla还在 setTimeout 第一个参数中使用 function(msg) {self.remind(msg);} 而不是 this.remind。

function Timer(count,start){
    this.count = count;
    this.start = start;

}

//below code works
Timer.prototype.counting = function(){
    var self = this;
    setTimeout(function(){self.counting();},this.start);
    console.log(this.count);
    this.count++;
};

//below code doesn't work
/*
Timer.prototype.counting = function(){
    setTimeout(this.counting,this.start);
    console.log(this.count);
    this.count++;
};
*/
var t1 = new Timer(0,1000);
t1.counting();
var t2 = new Timer(100,1000);
t2.counting();

Answer 1

The MDN documentation of setTimeout has a whole section about it , 我推荐阅读它。

---

在您传递给 setTimeout 的回调中，this 将引用 window，而不是您的类的实例。

如果调用该函数，this.count(指的是 window.count)将为 undefined，因为没有全局变量count 变量。稍后它将变为 NaN(undefined++ 是 NaN)。您的对象的 count 属性根本不会改变。

通过显式调用函数作为对象的方法 (self.counting())，您可以确保 this 正确引用您的类的实例。

您可以通过使用 .bind ^[MDN] 来实现同样的效果，而不是使用另一个函数:

setTimeout(this.counting.bind(this), this.start);

阅读this MDN article了解有关this的更多信息。