Преимущество this в JavaScript

Из сказанного ранее пока не очевидно особое преимущество this. Ведь внутри функции-обработчика и так будет доступен наш элемент - ведь переменная elem будет глобальной для нашей функции func:

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

function func() {
	// здесь доступна переменная elem с нашим элементом
}

И, несложно сообразить, что содержимое this и содержимое переменной elem в нашем случае равны:

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

function func() {
	console.log(elem === this); // выведет true
}

В чем же особое преимущество this? Оно проявляется, когда у нас несколько элементов, и к каждому привязана одна и та же функция.

Посмотрим на примере. Пусть у нас есть 3 кнопки:

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

Получим ссылки на них в переменные:

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

Привяжем к этим кнопкам одну и ту же функцию:

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

А внутри функции будем выводить this.value:

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

Получится, что у нас есть три кнопки. Нажатие на каждую кнопку будет приводить к вызову функции func. При этом при каждом клике this будет содержать ссылку на ту кнопку, в которой произошло событие.

To есть каждое нажатие будет выводить в консоль value той кнопки, на которой произошло нажатие, но делать это будет одна и та же функция func! Вот в чем преимущество использования this.

Даны 5 абзацев с какими-то текстами. По клику на любой абзац запишите в конец его текста восклицательный знак.

Даны 3 инпута, в которых записаны какие-то числа. По потери фокуса в любом из инпутов возведите стоящее в нем число в квадрат.