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:

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

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

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

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

javascriptfunction 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ść:

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

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

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

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