0

对不起，我是 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

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

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

4

1 回答 1

3

您的函数运行错误this。

this根据调用函数的方式设置。
被叫的时候requestAnimationFrame，this会window。

要解决此问题，您需要保存this在闭包中：

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

你也可以使用新的 ES5bind()函数来为你做这件事：

requestAnimationFrame(this.processInput.bind(this));
于 2013-09-15T13:07:19.433 回答