Wiązanie kontekstu za pomocą metody call w JavaScript

A więc, przeanalizowaliśmy już, jak tak naprawdę działa this. Przyjrzyjmy się teraz metodom, które pozwalają wymusić określenie, w jakim kontekście wywoływana jest funkcja (czyli wymusić ustawienie, czemu równy jest this).

Pierwsza metoda, którą omówimy, nazywa się call. Spójrzmy na jej działanie na przykładzie. Załóżmy, że mamy input:

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

Pobierzmy referencję do tego inputa i zapiszmy ją w zmiennej elem:

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

Stwórzmy teraz funkcję func, wewnątrz której wypiszemy this.value:

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

Na razie nasza funkcja nie wie, na co wskazuje this. Gdybyśmy powiązali ją przez addEventListener, wtedy tak. Ale my tego nie zrobimy. Zamiast tego po prostu wywołamy naszą funkcję, mówiąc jej, że this powinien być równy elem.

Robimy to w ten sposób: func.call(elem). Ten kod jest równoważny prostemu wywołaniu funkcji func w ten sposób: func(), tylko z warunkiem, że this jest równy elem.

A więc, składnia metody call jest taka: funkcja.call(obiekt). Złóżmy wszystko w całość:

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

function func() {
	console.log(this.value); // wypisze value inputa
}
func.call(elem);

Dana jest funkcja:

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

Dane są trzy inputy:

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

Za pomocą metody call i funkcji func wypisz na ekran value każdego z inputów.