# Преимущество 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` будет содержать ссылку на ту кнопку, в которой произошло событие.

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

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

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

←→
↑
en ru