Zalety this w JavaScript

Z dotychczasowych rozważań nie wynika jeszcze szczególna zaleta this. W końcu wewnątrz funkcji obsługi zdarzenia nasz element i tak będzie dostępny - ponieważ zmienna elem będzie globalna dla naszej funkcji func:

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

function func() {
  // tutaj dostępna jest zmienna elem z naszym elementem
}

I nietrudno się domyślić, że zawartość this i zawartość zmiennej elem w naszym przypadku są równe:

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

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

Na czym więc polega szczególna zaleta this? Ujawnia się ona, gdy mamy kilka elementów, do których podpięta jest ta sama funkcja.

Spójrzmy na przykład. Załóżmy, że mamy 3 przyciski:

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

Pobierzmy referencje do nich do zmiennych:

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

Podepnijmy do tych przycisków tę samą funkcję:

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

A wewnątrz funkcji wypisujmy this.value:

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

Okaże się, że mamy trzy przyciski. Kliknięcie każdego przycisku będzie powodować wywołanie funkcji func. Przy tym przy każdym kliknięciu this będzie zawierać referencję do tego przycisku, w którym wystąpiło zdarzenie.

Czyli każde kliknięcie będzie wypisywać w konsoli value tego przycisku, na którym nastąpiło kliknięcie, ale robić to będzie jedna i ta sama funkcja func! Oto zaleta używania this.