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:

javascriptlet 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:

javascriptlet 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:

html<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:

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

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

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

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

javascriptfunction 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.