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