Diese Frage hat hier schon eine Antwort:
Aus irgendeinem Grund bekomme ich seltsame Werte für "das" in meiner es6-Klasse ...
Warum bezieht sich das "Dies" innerhalb der Klickmethode des Clickers auf den Dom-Knoten und nicht auf ... selbst?
Noch wichtiger: Wie verweise ich auf die count-Eigenschaft von Clickers innerhalb seiner Klickmethode, wenn ich "this" nicht dazu verwenden kann?
Warum ist das "Dies" innerhalb der Klickmethode des Clickers gemeint? der Dom-Knoten statt ... selbst?
Weil die Angabe für .addEventListener() den Zeiger this auf das DOM-Element setzt, das das Ereignis erfasst hat. So funktioniert es.
Wenn Sie eine Methode als Callback übergeben, bei der Sie den Wert von this überschreiben möchten, können Sie .bind() verwenden, um den gewünschten Wert von this damit zu erzwingen:
Erläuterung:
Alle Funktionsaufrufe in Javascript setzen einen neuen Wert von this , je nachdem wie die Funktion aufgerufen wird. Weitere Informationen zu diesem Basissatz finden Sie diese Erklärung von Regeln.
Außerdem, wenn Sie das tun:
%Vor% Sie erhalten nur die Methode this.click und übergeben diese Methode alleine an addEventListener() . Der Wert von this wird vollständig verloren gehen. Es ist, als ob du das tust:
Darüber hinaus ist .addEventListener() speziell so aufgebaut, dass es seinen eigenen Wert von this beim Aufruf des Callbacks setzt (um this auf das Element zu setzen, das das Ereignis erzeugt).
Sie können also .bind() wie oben gezeigt verwenden, um den korrekten Wert von this beim Aufruf Ihrer Methode zu erzwingen.
Als Referenz finden Sie diese Beschreibung der sechs Möglichkeiten, dass this für einen Funktionsaufruf in Javascript auf gesetzt ist, um nützlich zu sein.
Weitere Optionen
Ich finde .bind() als die klarste Art, dies zu definieren, aber Sie können auch eine lokale anonyme Funktion verwenden:
oder in ES6 eine Pfeilfunktion:
%Vor% Die Pfeilfunktion behält den Wert von this für Sie automatisch bei, um zu vermeiden, dass die im vorherigen Beispiel verwendete self -Referenz benötigt wird.
Tags und Links javascript class ecmascript-6 this