Javascript Ereignis Listener

Question

Ich versuche, ein einfaches Pong-Spiel in Javascript zu machen. Ich habe eine Pong-Klasse, und ich möchte ein Verfahren schaffen, die Spieler Rechtecke auf, wie die Maus bewegt sich basierend zu bewegen:

class Player 
{ 
    constructor() 
    { 
    // do stuff 
    } 
} 

class Pong 
{ 
    constructor(canvas) 
    { 
    //do stuff 
    this.player1 = new Player(true); // Create an instance of another class 

    } 

    handleMouseMove(event) 
    { 
    var y = event.clientY; 

    // this.player1 is undefined!! 
    console.log("this.player1: "+this.player1); 
    this.player1.pos.y = y; 
    } 


function main() 
{ 
    // Initialize canvas and context 
    canvas = document.getElementById('mycanvas'); 

    const pong = new Pong(canvas); 
    canvas.addEventListener('mousemove', pong.handleMouseMove); 
} 

Jedes Mal, wenn ich die Maus in Bewegung setzen, es sagt mir, dass player1 undefiniert ist. Wie kann ich die Klassenmethode als Ereignis-Listener festlegen und sie über die Mitglieder der Klasse informieren?

Answer 1

Das liegt daran, dass this im Ereignis-Listener auf das Element verweist, das das Ereignis (Canvas) ausgelöst hat. Sie können die this Stichwort binden bind wie folgt aus:

canvas.addEventListener('mousemove', pong.handleMouseMove.bind(pong)); 
//              ^^^^^^^^^^^ 

bind eine Funktion zurück, die seine this Schlüsselwort festgelegt, was auch immer Sie es als Parameter gegeben.

Answer 2

Dies ist meiner Meinung nach einer der schlimmsten Teile von Javascript. Wenn Sie pong.handleMouseMove an addEventListener übergeben, übergeben Sie die Funktion selbst. Wenn das Ereignis ausgelöst wird, ruft es in diesem Kontext die Funktion außerhalb des Kontexts Ihrer Pong Instanz auf. Sie müssen bind auf handleMouseMove nennen, etwa so:

canvas.addEventListener('mousemove', pong.handleMouseMove.bind(pong));

bind existiert auf allen Funktionen und gibt eine neue Funktion, die Sie rund um passieren kann, und stellt sicher, dass this innerhalb der Funktion mit dem angegebenen Parameter gebunden ist (in diesem Fall pong). Die andere Antwort von ibrahim mahrir ist falsch, Sie müssen Ihre pong Instanz an die bind Funktion übergeben. Was auch immer Sie übergeben, ist, was this innerhalb der Funktion zugewiesen wird, die Sie binden.