Javascript OOP Sichtbarkeit

Question

Hallo Leute, ich habe diesen Code

class Player { 
         constructor(posX, posY, spdX, spdY, width, height, image){ 
          // Vytvoření hráče 
          this.posX = posX; 
          this.posY = posY; 
          this.spdX = spdX; 
          this.spdY = spdY; 
          this.width = width; 
          this.height = height; 
          this.image = image; 
         }  
         // Draws player 
         draw(){ 
          var imageObj = new Image(); 
          imageObj.src = this.image; 
          ctx.drawImage(imageObj, testPlayer.posX, testPlayer.posY); 
         } 
         jump(){ 
          this.move('up'); 

         } 
         // Move 
         move(direction){ 
          // Returns false if fails 
          switch(direction){ 
           case 'right': 
            this.posX+= this.spdX; 
            break; 
           case 'left': 
            this.posX-= this.spdX; 
            break; 
           case 'up': 
            this.posY-= this.spdY; 
            break; 
           case 'down': 
            this.posY+= this.spdY; 
            break; 
           default: 
            return false; 
          } 
         } 
        } 

Ich habe Probleme bei Sprungmethode. Wenn ich springen will, muss ich auf und ab gehen, aber wie kann ich das nach der Zeit tun. Weil ich versucht habe, setTimeout(function(){}), aber innerhalb dieser Funktion Keyword dies nicht sehen, Methode verschieben. Und wenn ich setTimeout(this.move('down'),500) mache, funktioniert es nicht. Also irgendwelche Ideen?

Answer 1

Sie die Funktion müssen den richtigen Kontext haben. Ein einfacher Weg wäre die Verwendung von ES6-Pfeilfunktionen (caniuse). Sie werden erhalten die this Kontext aus, wenn Sie ursprünglich die Funktion definiert:

setTimeout(()=>{this.move('down')}, 500) 

Oder wenn Sie regelmäßig Funktionen verwenden möchten, verwenden Sie Function.prototype.bind(), um den this Kontext zu binden. Auf diese Weise, wenn die Funktion schließlich genannt wird, ist der Kontext der this aus, wenn Sie genannt .bind (diese)

function goDown(){this.move('down')} 
setTimeout(goDown.bind(this)) 

Answer 2

Das Problem ist, dass setTimeout 's callback bewirkt, dass der Wert von this zu ändern.

Sie können this erhalten, indem Sie:

var that = this; 
setTimeout(function() { 
    that.move('down'); 
}, 500);