nicht funktionieren kann, in Objekt verwenden mit diesem

Question

Unten ist mein Code, wenn ich in meinem Eventlistener-Objekt hinzufügen:

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - canv.getBoundingClientRect().left);//Look at canv 
    myGameArea.y = (e.clientY - canv.getBoundingClientRect().top);//Look at canv 
}); 

Es funktioniert, aber nur, wenn ich getElementById verwenden mein Canvas-Element zu finden und dann verwenden canv für meine Bedürfnisse. Aber wenn ich das tun:

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

Dann myGameArea tut Änderung überhaupt und mein Debugger sagt dies: „Nicht abgefangene Typeerror:. Kann nicht lesen Eigentum‚getBoundingClientRect‘undefinierter bei HTMLCanvasElement“. Ich habe Canvas in meinem Objekt vor diesem Teil des Codes deklariert, und ich habe diese.canvas für viele andere Funktionen verwendet. Wo ist mein Problem?

Answer 1

Im Gegensatz zu normalen Variablen, wird der Wert des this Schlüsselwort hängt nicht davon ab, wo die Funktion Sie zugreifen Es ist definiert, aber wie es heißt. In Ihrem Fall wird this im Handler überschrieben. Eine schnelle Abhilfe wäre die folgende:

var that = this; 
this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - that.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - that.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

hier ausdrücklich erklären wir das Objekt, das wir zugreifen möchten, und somit müssen nicht this überhaupt zu benutzen. Dies gilt jedoch nicht als bewährte Methode. Der empfohlene Weg mit verschachteltem Bereich zu beschäftigen ist bind die Funktion auf den Kontext Sie wollen:

this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}.bind(this)); 

Oder, wenn Sie verwenden ES6, verwendet Fett Pfeil-Notation (() => {}), die nicht schafft seine eigenen Kontext, für den Handler:

this.canvas.addEventListener('mousemove', (e) => { 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

Answer 2

In der Callback-Funktion addEventListener ist this nicht mehr derselbe Wert wie außerhalb des Callbacks. Wenn Sie auf den gleichen Wert this binden mögen, können Sie entweder .bind(this) oder mit dem Pfeil func verwenden:

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}.bind(this)); 

this.canvas.addEventListener('mousemove', (e) => { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

Answer 3

Innerhalb des Callback-Verschlusses, der Kontext this ist das Canvas-Element selbst. Daher würden Sie einfach this verwenden, um auf die Zeichenfläche zu verweisen.

this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - this.getBoundingClientRect().left); 
    myGameArea.y = (e.clientY - this.getBoundingClientRect().top); 
});