從對象內部調用setInterval Javascript？

Question

我想用Jvascript製作遊戲引擎。到目前爲止，我有：

function gameEngine() { 

    this.canvas = $('canvas')[0]; 
    this.ctx = this.canvas.getContext('2d'); 
    this.framerate = 20; 

    this.resetCanvas = function() { 
     this.ctx.fillStyle = 'red'; 
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); 
    }; 

    this.loop = function() { 
     this.resetCanvas(); 
    }; 

    this.run = function() { 
     setInterval(this.loop, this.framerate); 
    }; 
} 

new gameEngine(); 

但畫布沒有顯示;爲什麼？

Answer 1

this is becoming detached when passing this.loop to setInterval.常見的解決方案：

Function.bind:

this.run = function() { 
    setInterval(this.loop.bind(this), this.framerate); 
}; 

或者use a closure:

var self = this; 
this.run = function() { 
    setInterval(function() { 
     self.loop(); 
    }, this.framerate); 
}; 

然後，你需要真正呼叫的run方法：

new gameEngine().run(); 

// or 

function gameEngine() { 

    // snip... 

    this.run(); 
} 

Answer 2

你永遠不會打電話setInterval。

var ngin = new gameEngine(); 
ngin.run(); 

Answer 3

您需要在初始化後，打電話給你的gameEngine的run()功能。您可能還想將您的gameEngine存儲在一個變量中。

例子：

var myGameEngine = new gameEngine(); 
myGameEngine.run(); 

或者，如果你不希望有打電話來說，你的對象定義的堅持到底this.run()。這消除了存儲對你的gameEngine對象的引用的需要，儘管你可能仍然應該爲以後參考。