Перавага 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 інпута, у якіх запісаныя якія-тэ лікі. Па страце фокусу ў любым з інпутаў узвядзіце якое стаіць у ім лік у квадрат.