Vantaggio di this in JavaScript

Da quanto detto finora, il vantaggio speciale di this non è ovvio. Dopotutto, all'interno della funzione di gestione il nostro elemento sarà comunque accessibile - poiché la variabile elem sarà globale per la nostra funzione func:

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

function func() {
  // qui è accessibile la variabile elem con il nostro elemento
}

E, non è difficile capire, che il contenuto di this e il contenuto della variabile elem nel nostro caso sono uguali:

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

function func() {
  console.log(elem === this); // restituirà true
}

Qual è allora il vantaggio speciale di this? Si manifesta quando abbiamo più elementi, ed ognuno di essi ha associata la stessa funzione.

Vediamo un esempio. Supponiamo di avere 3 pulsanti:

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

Otteniamo i loro riferimenti in variabili:

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

Associamo a questi pulsanti la stessa funzione:

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

E all'interno della funzione stamperemo this.value:

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

Risulterà che abbiamo tre pulsanti. Cliccare su ogni pulsante porterà alla chiamata della funzione func. In questo caso, ad ogni click this conterrà il riferimento al pulsante su cui è avvenuto l'evento.

Ciò significa che ogni click stamperà nella console il value del pulsante su cui è avvenuto il click, ma lo farà una sola e identica funzione func! Ecco il vantaggio dell'uso di this.