Javascript绑定问题

Javascript Binding Issue

本文关键字：问题 绑定 Javascript      更新时间：2023-09-26

这段代码让我很困惑:

var timer = 
{
    start: function()
    {
        var self = this;
        /*Why the code below doesn't write to this:
            window.setInterval(self.tick, 1000).*/
        //Instead, it embedded into a function like this:
        window.setInterval(function(){self.tick();}, 1000)
    },
    tick: function()
    {
        console.log("tick!");
    }       
}
timer.start();

原因是JavaScript的this是动态的。当您调用如下函数时:

object.func();

this设置为object。但是，当您简单地调用函数时:

func();

或者将其传递给其他一些函数(包括setInterval)， this将被设置为全局对象(通常是window)。

因此，当您将self.tick传递给setInterval时，tick中的this将是全局对象，而不是timer。当您通过function() { self.tick(); }时，它是self (timer)。

在这里，没有区别，因为tick不访问this，但如果tick访问this，您可能想要使用function() { self.tick(); }，因为否则，您将修改全局对象的属性，而不是timer。

function(){self.tick();}比self.tick更容易扩展。这有点像在只包含一条语句的if块周围使用(或不使用)花括号的区别。

我们使用:window.setInterval(function(){self.tick();}, 1000)的另一个原因是符合"单一职责"的设计原则。Tick()应该只做一项工作:Tick。如果在计时器触发时需要执行更多的任务，则应该编写另一个函数并在事件处理程序中调用它，而不是修改tick()。例如:

window.setInterval(function(){
    self.tick();
    self.notify();
    .....
    }, 1000)
相关文章：