JavaScript-те this-тің артықшылығы

Бұрын айтылғандардан this-тің ерекше артықшылығы әлі анық көрінбейді. Өйткені, оқшаулауыш функцияның ішінде біздің элементке глобалды elem айнымалысы арқылы қол жеткізуге болады:

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 инпут берілген. Кез келген инпутта фокус жоғалтқан кезде, онда тұрған санды квадратқа шығарыңыз.