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

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

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

function func() {
	// бу ерда бизнинг элемент bilan 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 та бирон матнли абзац берилган. Ҳар қандай абзацни босганда унинг матни охирига undov белгисини ёзинг.

3 та инпут берилган, уларда бир нечта сонлар ёзилган. Ҳар қандай инпутда фокус йўқотилганда унинг ичидаги сонни квадратга кўтаринг.