Prednost this v JavaScript

Iz prej povedanega še ni očitna posebna prednost this. Navsezadnje bo znotraj funkcije-obravnavalnika naš element itak dostopen - saj bo spremenljivka elem globalna za našo funkcijo func:

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

function func() {
	// tukaj je dostopna spremenljivka elem z našim elementom
}

In, ni težko ugotoviti, da sta vsebina this in vsebina spremenljivke elem v našem primeru enaki:

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

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

V čem je torej posebna prednost this? Pokazuje se, ko imamo več elementov, in je vsakemu pripeta ista funkcija.

Poglejmo si na primeru. Naj imamo 3 gumbe:

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

Dobimo reference nanje v spremenljivke:

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

Pripnimo k tem gumbom isto funkcijo:

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

In znotraj funkcije bomo izpisali this.value:

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

Izkazalo se bo, da imamo tri gumbe. Klik na vsak gumb bo povzročil klic funkcije func. Pri tem bo ob vsakem kliku this vseboval referenco na tisti gumb, v katerem se je dogodek zgodil.

To pomeni, da bo vsak klik v konzolo izpisal value tistega gumba, na katerega je prišlo do klika, vendar bo to počela ista funkcija func! V tem je prednost uporabe this.

Podanih je 5 odstavkov z nekaj besedili. Ob kliku na katerikoli odstavek zapišite na konec njegovega besedila klicaj.

Podani so 3 vnosi, v katere so zapisana nekakšna števila. Ob izgubi fokusa v kateremkoli od vnosov številko, ki stoji v njem, kvadrirajte.