Avantajul lui this în JavaScript

Din cele spuse până acum nu este evident avantajul special al lui this. La urma urmei, în interiorul funcției de manipulare elementul nostru va fi accesibil oricum - la urma urmei, variabila elem va fi globală pentru funcția noastră func:

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

function func() {
	// aici variabila elem cu elementul nostru este accesibilă
}

Și, nu este greu de înțeles, că conținutul lui this și conținutul variabilei elem în cazul nostru sunt egale:

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

function func() {
	console.log(elem === this); // va afișa true
}

Care este atunci avantajul special al lui this? Acesta se manifestă atunci când avem mai multe elemente, și fiecare este legat de aceeași funcție.

Să ne uităm la un exemplu. Să presupunem că avem 3 butoane:

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

Le obținem referințele în variabile:

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

Să legăm acestor butoane aceeași funcție:

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

Iar în interiorul funcției vom afișa this.value:

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

Se va dovedi că avem trei butoane. Apăsarea fiecărui buton va duce la apelul funcției func. În același timp, la fiecare clic this va conține o referință la butonul pe care a avut loc evenimentul.

Adică fiecare apăsare va afișa în consolă value al butonului pe care s-a făcut clic, dar va face acest lucru una și aceeași funcție func! Iată care este avantajul utilizării lui this.

Sunt date 5 paragrafe cu niște texte. La click pe orice paragraf, adăugați la sfârșitul textului său semnul exclamării.

Sunt date 3 câmpuri de introducere, în care sunt scrise niște numere. La pierderea focusului în oricare dintre câmpuri, ridicați numărul din el la pătrat.