JavaScript даги this объекти

Ҳозир биз функция-ҳодис қайта ишловчисида mavjud бўлган махсус this объекти билан ишлаймиз. Ушбу объект ҳодис юз берган элементни кўрсатади.

this объекти қулай, агар ҳодис юз берган элемент ва ҳодис натижасида амал бажариладиган элемент бир хил бўлса.

Маслан, агар бизда инпут бўлса, биз унга фокус йўқотиш ҳодиси учун қайта ишловчини боглашimз мумкин ва ушбу ҳодис юз берганда инпут матни билан бирор иш бажаришimз мумкин. Келтирилганини бажарамиз. Бизда инпут берилган бўлсин:

<input id="elem" value="text">

Келик уни elem ўзгарувчисига ҳавола сифатида оламиз:

let elem = document.querySelector('#elem');

Унга blur ҳодиси учун функция-қайта ишловчини боглаймиз:

elem.addEventListener('blur', func);

Ушбу func функцияси ичида бизнинг инпутимизга ишора қилувчи this объекти мавжуд бўлади:

function func() {
	console.log(this); // бизнинг элементimзга ҳаволани ўз ичига олади
}

Инпутимизнинг value атрибутининг mазмунини чиқарамиз:

function func() {
	console.log(this.value); // атрибут mазмунини чиқарамиз
}

Энди эса инпутга бирор матн ёзамиз:

function func() {
	this.value = '!!!';
}

Номсиз функциядан ҳам фойдаланиш мумкин:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Инпут берилган. Ушбу инпут томонидан фокус олинганида унга 1 рақамини ёзинг, фокус йўқотилганида эса 2 рақамини ёзинг. Функция-қайта ишловчи ичида инпутга mуроожат қилиш учун this объектидан фойдаланинг.

Қиймати 1 рақами бўлган тугма берилган. Ушбу тугма босилганда унинг қиймати ҳар дафъа биртага ошишини таъминланг.