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

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

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  // мұнда біздің элементіміз бар elem айнымалысына қолжетімді
}

Және, this-тің мазмұны мен elem айнымалысының мазмұны біздің жағдайда тең екенін түсіну оңай:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  console.log(elem === this); // true шығарады
}

Сонда this-тің ерекше артықшылығы неде? Ол бізде бірнеше элемент болғанда және әрқайсысына бір функция байланған кезде көрінеді.

Мысалды қарастырайық. Бізде 3 батырма бар делік:

html<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Оларға сілтемелерді айнымалыларға алайық:

javascriptlet button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Осы батырмаларға бір функцияны байлайық:

javascriptbutton1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Ал функция ішінде this.value шығарамыз:

javascriptfunction func() {
  console.log(this.value);
}

Нәтижеде бізде үш батырма бар. Әр батырманы басу func функциясын шақырады. Сонымен бірге әр басу кезінде this оқиға болған батырмаға сілтемені қамтиды.

Яғни, әр басу консольде басылған батырманың value-ін шығарады, бірақ мұны бір func функциясы жасайды! Міне, this-ті қолданудың артықшылығы осында.