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:

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

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

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

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

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

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

function func() {
  console.log(this.value); // vypíše value vstupního pole
}
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">