Povezivanje konteksta pomoću metode call u JavaScriptu

Dakle, razumeli smo kako zapravo radi this. Hajde sada da pogledamo metode koje nam dozvoljavaju da nametnemo u kom kontekstu se funkcija poziva (to jest da nametnemo, čemu je jednako this).

Prva metoda koju ćemo razmotriti, zove se call. Hajde da pogledamo kako radi na primeru. Recimo da imamo input:

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

Hajde da dobijemo referencu na ovaj input i zapišemo je u promenljivu elem:

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

Hajde sada da napravimo funkciju func, unutar koje ćemo ispisati this.value:

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

Trenutno naša funkcija ne zna na šta se odnosi this. E, da smo je povezali preko addEventListener, onda bi znala. Ali mi to nećemo uraditi. Umesto toga ćemo prosto pozvati našu funkciju, rekavši joj da this mora biti jednak elem.

To se radi ovako: func.call(elem). Ovaj kod je ekvivalentan prostom pozivu funkcije func ovako: func(), samo sa uslovom da je this jednak elem.

Dakle, sintaksa metode call je: funkcija.call(objekat). Hajde da spojimo sve zajedno:

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

function func() {
	console.log(this.value); // ispisaće value input-a
}
func.call(elem);

Data je funkcija:

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

Data su tri input-a:

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

Pomoću metode call i funkcije func ispisati na ekran value svakog od input-a.