Javascript this 在 this.method 中

Question

var AnimationManager = function (time, completionMethod) {
    "use strict";
    this.animationObjects = [];
    this.time = time;
    this.add = function (animationObject) {
        this.animationObjects.push(animationObject);
    };
    this.completionMethod = completionMethod;
    this.currentStage = 0;
    this.maximumStage = this.time * FPS;

    this.tick = function () {
        this.currentStage += 1;
        var i;
        for (i = 0; i < this.animationObjects.length; i += 1) {
            this.animationObjects[i].applyAnimation(this.currentStage);
        }

        if (this.currentStage < this.maximumStage) {
            console.log(this.currentStage);
            setTimeout(this.tick, 1000.0 / FPS);
        } else {
            this.completionMethod();
        }
    };

    //Call this to start
    this.startAnimation = function () {
        this.timer = setTimeout(this.tick, 1000.0 / FPS);
    };
};

chrome 控制台显示 this.animationObjects 未定义，但我将其设置为空数组。这是为什么？

Answer 1

当您将它作为超时处理程序传递时，this.tick 的上下文将丢失。使用:

 this.timer = setTimeout(this.tick.bind(this), 1000.0 / FPS);

或者略显老套的:

 var mgr = this;
 this.timer = setTimeout(function() { mgr.tick(); }, 1000.0 / FPS);

this 的值在每次调用函数时确定。函数和任何特定对象之间没有内在的长期关系；换句话说，“滴答”函数最初是作为该对象的属性值创建的，这一事实并不重要。重要的是函数是如何调用的。