Question

我有以下代码，应该每秒显示一个递增的数字：

    let timer_demo = {
        count: 0,
        timer: null,
        update: function() {
            this.count++;
            console.log(this.count);
            this.timer = setTimeout(this.update, 1000);
        }
    };
    timer_demo.update();

然而，当我在Chrome中运行时，我会得到一个“1”，然后是一秒钟的“NaN”然后什么都没有。计时器停止。我觉得问题是我不理解在这种情况下“这个”发生了什么。我只是不知道它是什么。第二次调用“update（）”方法时，“count”字段为“NaN”似乎支持这个断言。任何人都可以为我阐明这一点吗？

谢谢！

Answer 1

函数setTimeout不会调用this.update，而是获取更新函数的副本并重复它。不幸的是，它失去了对原始＆＃34;这＆＃34;。

的约束力

要解决此问题，您可以执行以下操作：

let timer_demo = {
        count: 0,
        timer: null,
        update: function() {
            this.count++;
            console.log(this.count);
            this.timer = setTimeout(this.update.bind(this), 1000);
        }
    };
timer_demo.update();

这可确保功能副本绑定到此。

Answer 2

var timer_demo = {
        count: 0,
        timer: null,
        update: function() {
                console.log(this);
            this.count++;
            console.log(this.count);
            this.timer = setTimeout(this.update.bind(this), 1000);
        }
 };
 timer_demo.update();

在setTimeout回调中，此默认为窗口对象（在非严格模式下）。要将自定义this传递给setTimeout回调，请使用bind。

为了在javascript中更好地理解这一点，请阅读http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/。

Answer 3

您可以使用新的箭头功能来处理此问题。他们不会绑定自己的this，因此您最终会从外部环境中获取它。

let timer_demo = {
    count: 0,
    timer: null,
    update: () => {
        this.count++;
        console.log(this.count);
        this.timer = setTimeout(this.update, 1000);
    }
};
timer_demo.update();

我想我在JavaScript中误解了“这个”

3 个答案: