Question

我是JavaScript的新手，我试图编写一个简单的游戏循环。这是我的游戏对象：

var Game = {
    timers: [],
    start: timestamp(),
    stopTimers: function() {
        consoleEntry('All timers have been stopped.');
        this.timers.length = 0;
    },
    update: function(elasped) {
        for (var i = 0; i < this.timers.length; ++i) {
            var timer = elapsed - timers[i].startTime;
            console.log('Timer: ' + timer + '. Timer interval: ' + this.timers[i].interval + '.');
            if (this.timers[i].interval <= timer) {
                this.timers[i].times--;
                this.timers[i].report = true;
                if (this.timers[i].times != 0) {
                    this.timers[i].startTime = elapsed;
                }
            }
        }
    },
    render: function() {
        for (var i = 0; i < this.timers.length; ++i) {
            if (this.timers[i].report) {
                consoleEntry('Timer: ' + this.timers[i].name + ' (' + this.timers[i].times + ' remaining).');
                this.timers[i].report = false;
                if (this.timers[i].times == 0) this.timers.splice(i, 1);
            }
        }
    },
    gameLoop: function() {
        var elapsed = timestamp() - this.start;
        this.update(elapsed);
        this.render();
        requestAnimationFrame(this.gameLoop);
    },
    startGame: function() {
        console.log(this);
        requestAnimationFrame(this.gameLoop);
    }
}

Game.startGame();加载时，我致电<body>。这是我收到的错误：Uncaught TypeError: undefined is not a function。它引用this.update(elapsed);函数内的gameLoop。出于某种原因，我不明白，当我在console.log(this)内startGame时，我得到了它所属的对象（这很棒），但当我在gameLoop内做同样的事情时，我得到Window对象。

有谁知道为什么会这样？

谢谢！

Answer 1

查看“this”所指的最简单的方法是在调用语句的点符号中查看函数之前的哪个对象。

例如，如果你说

document.createElement(..)

在函数的定义中，“this”将引用文档。

所有功能都有这样的对象。全局函数指的是窗口。

window.console === console; // true

因此，当您执行“requestAnimationFrame”时，“this”指的是窗口。

您可以使用函数原型函数“call”和“apply”来指定“this”所指的内容。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

我对window.requestAnimationFrame并不是特别熟悉，但出于您的目的，我可能会建议以下两种选择之一：

也许简单地使用“call”就可以了

requestAnimationFrame.call(this, this.gameLoop);

或者，如果没有，闭包就可以了。

requestAnimationFrame(
   (function(g){ 
       return function() { g.gameLoop(); }; 
    })(this)
);

并且，有关Javascript中“this”的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

希望这有帮助！

＆＃39;这＆＃39;在对象方法中

1 个答案: