Kontextbindung mit der call-Methode in JavaScript

Wir haben also geklärt, wie this tatsächlich funktioniert. Lassen Sie uns nun Methoden betrachten, die es erlauben, zwangsweise anzugeben, in welchem Kontext eine Funktion aufgerufen wird (also zwangsweise festzulegen, was this gleich ist).

Die erste Methode, die wir betrachten werden, heißt call. Lassen Sie uns ihre Funktionsweise an einem Beispiel sehen. Nehmen wir an, wir haben ein Input-Feld:

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

Lassen Sie uns eine Referenz auf dieses Input-Feld holen und sie in der Variable elem speichern:

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

Lassen Sie uns nun eine Funktion func erstellen, in der wir this.value ausgeben:

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

Noch weiß unsere Funktion nicht, worauf this verweist. Wenn wir sie über addEventListener binden würden, dann schon. Aber das werden wir nicht tun. Stattdessen werden wir einfach unsere Funktion aufrufen und ihr sagen, dass this gleich elem sein soll.

Das macht man so: func.call(elem). Dieser Code ist äquivalent zu einem einfachen Funktionsaufruf func so: func(), nur mit der Bedingung, dass this gleich elem ist.

Also, die Syntax der call-Methode ist: Funktion.call(Objekt). Lassen Sie uns alles zusammenfassen:

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

function func() {
	console.log(this.value); // gibt den value des Input-Felds aus
}
func.call(elem);

Gegeben ist eine Funktion:

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

Gegeben sind drei Input-Felder:

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

Verwenden Sie die Methode call und die Funktion func, um den value jedes der Input-Felder auszugeben.