Vezava konteksta z metodo call v JavaScript

Torej, razložili smo si, kako dejansko deluje this. Zdaj pa poglejmo metode, ki omogočajo, da siloma določimo, v katerem kontekstu se funkcija kliče (to pomeni, da silomo povemo, čemu je enak this).

Prva metoda, ki jo bomo obravnavali, se imenuje call. Poglejmo si njeno delovanje na primeru. Naj imamo vnosno polje:

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

Pridobimo referenco na to vnosno polje in jo zapišimo v spremenljivko elem:

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

Sedaj naredimo funkcijo func, znotraj katere izpišemo this.value:

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

Naša funkcija za zdaj še ne ve, na kaj se sklicuje this. Če bi jo vezali prek addEventListener, potem bi vedela. Tega pa ne bomo storili. Namesto tega bomo preprosto poklicali našo funkcijo in ji rekli, da mora biti this enak elem.

To naredimo takole: func.call(elem). Ta koda je enakovredna preprostemu klicu funkcije func takole: func(), le s pogojem, da je this enak elem.

Torej, sintaksa metode call je takšna: funkcija.call(objekt). Zberimo vse skupaj:

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

function func() {
	console.log(this.value); // izpiše value vnosnega polja
}
func.call(elem);

Podana je funkcija:

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

Podana so tri vnosna polja:

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

Z uporabo metode call in funkcije func izpišite value vsakega od vnosnih polj.