Javascript 区间问题

我注意到一些我无法解释的事情。我编写了这个javascript代码，它可以增大或缩小一个蓝色框。脚本如下：

var animated = {

  timer : null,

  el : document.getElementById("divNavyBox"),

  startGrowAnimation : function() {

      this.stopAnimation();

      this.timer = setInterval(

          animated.doAnimation(5), 10);

  },

startShrinkAnimation : function() {

    this.stopAnimation();

    this.timer = setInterval(function() {

        animated.doAnimation(-5);

    }, 10);

},

stopAnimation : function() {

    clearInterval(this.timer);

},

doAnimation : function(amount) {

    var size = this.el.offsetWidth;



    if ((amount > 0 && size < 200) || (amount < 0 && size > 0)) {

        this.el.style.width = size + amount + "px";

        this.el.style.height = size + amount + "px";

    } else {

        this.stopAnimation();

    }

}

};

这段代码运行得很好。但是，我不明白为什么必须在参数中放入匿名函数，而不仅仅是普通的调用函数。因此，我将上面的代码替换为下面的代码：

startGrowAnimation : function() {

    this.stopAnimation();

    this.timer = setInterval(animated.doAnimation(5), 10);

},

当我使用这段代码时，由于某种原因，每次调用startGrowAnimation方法时，长方体的大小只会增加5个像素

---

那么，在这种情况下，为什么需要在匿名函数调用中包含startGrowAnimation方法呢

您尝试的代码将调用该函数并将返回传递到

setInterval（）

。这显然不是你想要的

如果将

animated.doAnimation

（对函数的引用）作为回调参数，则该函数中的

this

值将指向

窗口，而不是对象本身。这是因为它失去了作为该对象的方法调用的上下文

因此，必须将该方法作为对象的属性调用。这意味着您需要使用匿名函数包装器，以便其主体可以
设置动画。doAnimation（）

唯一的另一种方法不值得一提，因为它调用了
eval（）
type函数。
+1-回答得很好！是的，eval绝对不值得一提。可能不值得一提这不值得一提。我肯定有人会去查一下eval做了什么，并尝试使用它；）这解释了很多。然而，有一件事仍然困扰着我。您解释了当它不在匿名函数中时，“this”属性如何引用窗口对象而不是所需对象。每次调用startGrowAnimation时，如果不将doAnimation语句包装到匿名函数中，它仍然会增加5个像素。它只做一次，而不是不断地做。这对我来说仍然没有完全的意义…@Michael它可能非常混乱：）发生的是你正在调用函数，而不是传递对它的引用。它的返回值作为第一个参数（
undefined
，在本例中）传递给
setInterval（）
+1-这是一个很好的发人深省的问题！
startGrowAnimation : function() {

    this.stopAnimation();

    this.timer = setInterval(animated.doAnimation(5), 10);

},