Prednost this u JavaScript-u

Iz prethodno rečenog još uvek nije očigledna posebna prednost this. Naime, unutar funkcije-obrađivača će nam element i tako biti dostupan - pošto će promenljiva elem biti globalna za našu funkciju func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// ovde je dostupna promenljiva elem sa našim elementom
}

I, lako je zaključiti, da su sadržaj this i sadržaj promenljive elem u našem slučaju jednaki:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // ispisaće true
}

U čemu je onda posebna prednost this? Ona se manifestuje kada imamo više elemenata, i svakom je pridružena ista funkcija.

Pogledajmo na primeru. Neka imamo 3 dugmeta:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Dobijmo reference na njih u promenljive:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Pridružimo ovim dugmadima istu funkciju:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

A unutar funkcije ćemo ispisivati this.value:

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

Ispostavlja se da imamo tri dugmeta. Klik na svako dugme će dovesti do poziva funkcije func. Pritom će pri svakom kliku this sadržati referencu na ono dugme u kojem se događaj desio.

To znači da će svaki klik ispisivati u konzolu value onog dugmeta na kojem se klik desio, ali će to raditi ista funkcija func! Evo u čemu je prednost korišćenja this.

Date su 5 paragrafa sa nekim tekstovima. Klikom na bilo koji paragraf dopišite na kraj njegovog teksta uzvičnik.

Date su 3 input polja, u kojima su upisani neki brojevi. Pri gubitku fokusa u bilo kom od input polja, broj koji se u njemu nalazi podignite na kvadrat.