Grundlagen der Arbeit mit Kontext in JavaScript

Nehmen wir an, wir haben eine Funktion func, in der this verwendet wird:

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

Worauf zeigt this in dieser Funktion? Das wissen wir nicht. Und JavaScript weiß es nicht. Und die Funktion selbst weiß es nicht. Das bedeutet, dass zum Zeitpunkt der Erstellung der Funktion nicht definiert ist, worauf genau this zeigt. Und dies wird erst dann bestimmt, wenn diese Funktion aufgerufen wird.

Nehmen wir an, wir haben eine Eingabe:

<input id="elem" value="text">

Binden wir unsere Funktion func an diese Eingabe, so dass sie beim Verlust des Fokus der Eingabe ausgeführt wird. Jetzt wird zum Zeitpunkt der Ausführung der Funktion this auf unsere Eingabe zeigen:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // beim Verlust des Fokus wird 'text' ausgegeben
}

Aber wir könnten nicht eine Eingabe haben, sondern mehrere:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Und wir können jede dieser Eingaben an unsere Funktion func binden. In diesem Fall wird this für das erste Element zum Zeitpunkt des Aufrufs der Funktion auf dieses zeigen, und für das zweite - auf jenes.

In der Praxis bedeutet dies, dass this innerhalb der Funktion davon abhängt, auf welcher der Eingaben wir den Fokus verloren haben:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // gibt entweder 'text1' oder 'text2' aus
}

Im Grunde ist diese Besonderheit von this sehr praktisch - wir erstellen nur eine Funktion und binden sie an beliebig viele Eingaben. Wenn this nicht auf das Element zeigen würde, in dem das Ereignis aufgetreten ist, dann würden wir das nicht schaffen - wir müssten für jede Eingabe eine eigene Funktion mit dem gleichen Code erstellen!