javascript - Javascript 绑定问题

Question

这是让我感到困惑的代码片段：

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();

Answer 1

原因是 JavaScriptthis是动态的。当您调用如下函数时：

object.func();

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

func();

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

因此，当您只传递self.tick到时setInterval，this内部tick将是全局对象，而不是timer. 当你通过function() { self.tick(); }时，它是self（timer）。

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

Answer 2

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

Answer 3

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

window.setInterval(function(){
    self.tick();
    self.notify();
    .....
    }, 1000)