Предимство на 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 инпут полета, в които са записани някакви числа. При загуба на фокус във всяко от полетата повдигнете числото в него на квадрат.