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:

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

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

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

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

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

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

A wewnątrz funkcji wypisujmy this.value:

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

Dane są 5 akapitów z jakimiś tekstami. Po kliknięciu w dowolny akapit dopisz na końcu jego tekstu wykrzyknik.

Dane są 3 inputy, w których zapisane są jakieś liczby. Po utracie fokusu w dowolnym inpucie podnieś stojącą w nim liczbę do kwadratu.