Přiřazování kontextu pomocí metody call v JavaScriptu

Takže jsme již probrali, jak ve skutečnosti funguje this. Pojďme se nyní podívat na metody, které umožňují násilně určit, v jakém kontextu je funkce volána (tedy násilně říci, čemu se rovná this).

První metoda, kterou probereme, se jmenuje call. Podívejme se na její funkci na příkladu. Předpokládejme, že máme vstupní pole:

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

Získejme odkaz na toto vstupní pole a zapišme ho do proměnné elem:

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

Vytvořme nyní funkci func, uvnitř které vypíšeme this.value:

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

Zatím naše funkce neví, na co odkazuje this. Kdybychom ji navázali pomocí addEventListener, pak ano. Ale my to neuděláme. Místo toho jednoduše zavoláme naši funkci a řekneme jí, že this se musí rovnat elem.

To se dělá takto: func.call(elem). Tento kód je ekvivalentní prostému volání funkce func takto: func(), pouze s podmínkou, že this je roven elem.

Takže syntaxe metody call je taková: funkce.call(objekt). Pojďme to dát dohromady:

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

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

Je dána funkce:

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

Jsou dána tři vstupní pole:

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

Pomocí metody call a funkce func vypište na obrazovku value každého z vstupních polí.