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

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

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（）应该只做1个工作：tick。如果你需要在计时器触发时做更多的工作，你应该编写另一个函数并在事件处理程序中调用它而不是修改tick（）。例如：

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

Javascript绑定问题

3 个答案: