JavaScriptда thisнинг афзаллиги

Олдин айтилганлардан thisнинг махсус афзаллиги ҳали равшан эмас. Аксинча, ҳандлер функциясининг ичида бизнинг элемент мавжуд - чунки elem ўзгарувчиси бизнинг func функциямиз учун глобал бўлади:

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

function func() {
  // бу ерда бизнинг элемент bilan 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ни ишлатишнинг афзаллиги мана шудадир.