Përparësia e this në JavaScript

Nga sa u tha më parë, nuk është ende e dukshme përparësia e veçantë e this. Në fund të fundit, brenda funksionit-manipulator do të jetë i disponueshëm elementi ynë - në fund të fundit, ndryshorja elem do të jetë globale për funksionin tonë func:

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

function func() {
	// këtu ndryshorja elem me elementin tonë është e disponueshme
}

Dhe, nuk është e vështirë të kuptohet, se përmbajtja e this dhe përmbajtja e ndryshores elem në rastin tonë janë të barabarta:

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

function func() {
	console.log(elem === this); // do të shfaqë true
}

Cila është, pra, përparësia e veçantë e this? Ajo shfaqet kur kemi disa elemente, dhe secilit prej tyre i është lidhur i njëjti funksion.

Le ta shohim me një shembull. Le të kemi 3 butona:

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

Le të marrim referencat e tyre në ndryshore:

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

Le t'u lidhim këtyre butonave të njëjtin funksion:

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

Dhe brenda funksionit do të shfaqim this.value:

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

Do të ndodhë që ne kemi tre butona. Klikimi në çdo buton do të çojë në thirrjen e funksionit func. Në këtë rast, me çdo klikim this do të përmbajë një referencë për butonin në të cilin ka ndodhur ngjarja.

Kjo do të thotë se çdo klikim do të shfaqë në konsol value e asaj butoni në të cilin ka ndodhur klikimi, por këtë do ta bëjë i njëjti funksion func! Kjo është përparësia e përdorimit të this.

Jepen 5 paragrafë me disa tekste. Në klikim në çdo paragraf, shkruaj në fund të tekstit të tij një shenjë pikëçuditëse.

Jepen 3 inpute, në të cilat janë shkruar disa numra. Në humbje të fokusit në çdo input, ngrite numrin që gjendet në të në katror.