this-i eelis JavaScriptis

Eelnevast ei ole veel ilmne eriline eelis this. Lõppude lõpuks on sündmustekäsitlaja funktsiooni sees meie element kättesaadav - ju muutuja elem on meie funktsiooni jaoks globaalne func:

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

function func() {
	// siin on kättesaadav muutuja elem meie elemendiga
}

Ja pole raske aru saada, et this sisu ja muutuja elem sisu meie juhul on võrdsed:

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

function func() {
	console.log(elem === this); // väljastab true
}

Mis on siis this eriline eelis? See ilmneb siis, kui meil on mitu elementi, ja igaühega on seotud sama funktsioon.

Vaatame näidet. Olgu meil 3 nuppu:

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

Saame nende viited muutujatesse:

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

Seome nende nuppudega sama funktsiooni:

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

Ja funktsiooni sees väljastame this.value:

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

Tulemuseks on, et meil on kolm nuppu. Iga nupu vajutamine kutsub välja funktsiooni func. Samal ajal iga kliki korral sisaldab this viidet sellele nupule, kus sündmus toimus.

See tähendab, et iga vajutus väljastab konsooli value sellest nupust, mida vajutati, kuid seda teeb üks ja sama funktsioon func! Selline ongi this kasutamise eelis.

On antud 5 lõiku mingite tekstidega. Iga lõigu klikkimisel kirjuta teksti lõppu hüüumärk.

On antud 3 input-välja, kuhu on sisestatud mingid numbrid. Iga input-välja fookuse kaotamisel too seal olev number ruutu.