Der Vorteil von this in JavaScript

Aus dem bisher Gesagten ist der besondere Vorteil von this noch nicht offensichtlich. Schließlich wird innerhalb des Event-Handlers unser Element verfügbar sein – da die Variable elem für unsere Funktion func global sein wird:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// hier ist die Variable elem mit unserem Element verfügbar
}

Und es ist leicht einzusehen, dass der Inhalt von this und der Inhalt der Variable elem in unserem Fall gleich sind:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // gibt true aus
}

Worin liegt nun der besondere Vorteil von this? Er zeigt sich, wenn wir mehrere Elemente haben, und an jedes dieselbe Funktion gebunden ist.

Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben 3 Schaltflächen:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Holen wir uns ihre Referenzen in Variablen:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Binden wir an diese Schaltflächen dieselbe Funktion:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Und innerhalb der Funktion geben wir this.value aus:

function func() {
	console.log(this.value);
}

Das Ergebnis ist, dass wir drei Schaltflächen haben. Ein Klick auf jede Schaltfläche wird zum Aufruf der Funktion func führen. Dabei wird this bei jedem Klick eine Referenz auf die Schaltfläche enthalten, in der das Ereignis stattgefunden hat.

Das heißt, jeder Klick wird in der Konsole den value der Schaltfläche ausgeben, auf der geklickt wurde, aber dies wird ein und dieselbe Funktion func tun! Das ist der Vorteil der Verwendung von this.

Es sind 5 Absätze mit beliebigen Texten gegeben. Bei einem Klick auf einen beliebigen Absatz schreiben Sie ein Ausrufezeichen an das Ende seines Textes.

Es sind 3 Input-Felder gegeben, in denen beliebige Zahlen stehen. Beim Verlust des Fokus in einem beliebigen Input-Feld potenzieren Sie die darin stehende Zahl auf die Quadratzahl.