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