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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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