javascript - 防止对象函数内的事件覆盖 "this"

Question

Game.prototype.run = function() {
    window.setInterval(function() {
        var thisLoop = new Date().getTime();

        this.update();
        this.render();

        lastLoop = thisLoop;
    }, 1000 / this.fps);
};

game.js:198Uncaught TypeError: Object [object DOMWindow] 没有方法 'update'

为什么会这样？“this”应该与 Game 对象相关。

Answer 1

缓存this变量，或者使用Function.bind :

Game.prototype.run = function() {
    var _this = this;
    window.setInterval(function() {
        var thisLoop = new Date().getTime();
        _this.update();
        _this.render();
        lastLoop = thisLoop;
    }, 1000 / this.fps);
};

或者，使用 Function.bind :

Game.prototype.run = function() {
    window.setInterval((function() {
        ... 
    }.bind(this), 1000 / this.fps);
};

传递给 setInterval 的函数中的

this 指的是全局 window 对象，或者是 undefined(在严格模式)。

另一种方法，与第一种类似。将 this 作为参数传递给函数(这样就不会使用额外的局部变量):

Game.prototype.run = function() {
    window.setInterval(function(_this) {
        var thisLoop = new Date().getTime();
        _this.update();
        _this.render();
        lastLoop = thisLoop;
    }, 1000 / this.fps, this);
};