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:

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

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

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

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

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

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

function func() {
  console.log(this.value); // izpiše value vnosnega polja
}
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">