Viažba kontextu pomocou metódy call v JavaScripte

Takže sme už rozobrali, ako naozaj funguje this. Poďme teraz preskúmať metódy, ktoré nám umožňú nútene určiť, v akom kontexte sa funkcia volá (t.j. nútene povedať, čomu sa rovná this).

Prvá metóda, ktorú preskúmame, sa volá call. Pozrime sa na jej fungovanie na príklade. Nech máme input:

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

Získajme odkaz na tento input a zapíšme ho do premennej elem:

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

Vytvorme teraz funkciu func, vnútri ktorej vypíšeme this.value:

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

Zatiaľ naša funkcia nevie, na čo odkazuje this. Keby sme ju naviazali cez addEventListener, potom áno. Ale my to neurobíme. Namiesto toho jednoducho zavoláme našu funkciu, pričom jej povieme, že this sa má rovnať elem.

Robí sa to takto: func.call(elem). Tento kód je ekvivalentný jednoduchému volaniu funkcie func takto: func(), len s podmienkou, že this sa rovná elem.

Takže syntax metódy call je: funkcia.call(objekt). Poďme to všetko pospájať:

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

function func() {
	console.log(this.value); // vypíše value inputu
}
func.call(elem);

Daná funkcia:

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

Dané tri inputy:

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

Pomocou metódy call a funkcie func vypíšte na obrazovku value každého z inputov.