Player ist nicht definiert in update, aber nicht in create

Question

So ive Biene versucht, ein kleines Spiel zum Spaß zu machen. Das Problem ist, wenn ich einen neuen Spieler im Spielobjekt mache, heißt es, dass es in der Update-Funktion nicht definiert ist, aber in create function definiert ist.

Game.prototype = { 
    create: function() {  
     this.player = new Player(this.ctx, this.canvas); 
     this.player.create(); 
     console.log(this.player); // shows the player in console 
    }, 
    update: function() { 
     console.log(this.player); //undefined 
     this.player.update(); 
    } 
}; 

Hier ist, wie ich anfangen mein Spiel

function startGame(){ 
    var fps = 1; 
    var game = new Game(); 
    game.create(); 
    setInterval(game.update, 1000/fps); 
} 

error-> Uncaught Typeerror: kann Eigenschaft 'update' undefinierter bei update lesen (Game.js: 19)

Answer 1

Sie habe etwas code weggelassen (deine fehler bin ich mir ziemlich sicher, da Game nicht definiert ist) aber deine lösung wäre wohl, deinen setInterval ruf so zu ändern

setInterval(function() { game.update() }, 1000/fps); 

setInterval(game.update, 1000/fps); Mit dem etwas unintuitive Nebeneffekt das Verfahren verursacht, ohne korrekt zugeordnet this da update genannt werden soll, nicht zu game gebunden zu sein (siehe Kyle Lins Antwort). Grundsätzlich update existiert ganz von selbst, und wenn Sie einen Verweis auf es direkt erstellen, ist die Tatsache, dass Sie es über game.update referenzierte, verloren.

Wenn Sie eine anonyme Funktion wie diese verwenden, wird update den entsprechenden/erwarteten this Wert haben, wenn sie aufgerufen wird. Dies liegt daran, dass wir die explizite Syntax [OBJECT].[MemberMethod]() verwenden können, die implizit this an [OBJECT] bindet.

Answer 2

Im Zusammenhang mit einem setInterval Callback bezieht sich this normalerweise auf das Fenster. Stellen Sie sicher, es bezieht sich auf den vorgesehenen Ziel (Spiel-Instanz), mit der .bind() Methode:

function startGame(){ 
    var fps = 1; 
    var game = new Game(); 
    game.create(); 
    setInterval(game.update.bind(game), 1000/fps); 
} 

Weitere Informationen über die .bind() Methode, klicken Sie hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

EDIT: Noch besser Link auf der Fenstertimer this Problem: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval#The_this_problem, dank Andrew Li.