javascript - 使用 requestAnimationFrame 的 JS 游戏循环 - 对象函数仅调用一次

Question

抱歉，我在 js 方面是个菜鸟，以为我掌握了对象实例和函数的基础知识，结果我不知道也不知道如何弄清楚该怎么做。

我已经声明了一个 GameLoop 函数/对象，如下所示:

function GameLoop() {

    window.requestAnimationFrame = 
            window.requestAnimationFrame || /* Firefox 23 / IE 10 / Chrome */
            window.mozRequestAnimationFrame || /* Firefox < 23 */
            window.webkitRequestAnimationFrame || /* Safari */
            window.msRequestAnimationFrame || /* IE  */
            window.oRequestAnimationFrame; /* Opera */

    this.start = function() {
        this.update();
    };

    this.update = function() {
        this.processInput();
        this.updateState();
        this.updateGraphics();
        window.requestAnimationFrame(this.update);
    };

    this.processInput = function() {
        alert("pi");
    };

    this.updateState = function() {
        alert("us");
    };

    this.updateGraphics = function() {
        alert("ug");
    };  

};

我正在尝试像这样运行它:

$(document).ready(main);

        function main() {
            var gameLoop = new GameLoop();
            gameLoop.start();
        }

发生的情况是，每个“processInput”、“updateStaten”和“updateGraphics”函数都被调用一次(我可以看到显示的每个警报)，但随后它停止并出现错误(在 Firefox 的错误控制台内)是

Error: TypeError: this.processInput is not a function

指向 update 函数内的 this.processInput() 行。

我只是不明白为什么，尤其是第一次调用函数时。有人可以帮忙吗？

Answer 1

您的函数正在使用错误的 this 运行。

this 是根据您调用函数的方式设置的。
当被 requestAnimationFrame 调用时，this 将是 window。

要解决此问题，您需要将 this 保留在闭包中:

var self = this;
requestAnimationFrame(function() { self.processInput(); });

您还可以使用新的 ES5 bind() 函数来为您执行此操作:

requestAnimationFrame(this.processInput.bind(this));