JavaScript-те this объектісі

Қазір біз оқиға өңдеуші функцияда қолжетімді this арнайы объектісімен жұмыс істейміз. Бұл объект оқиға болған элементке сілтеме жасайды.

this объектісі ыңғайлы, егер оқиға болған элемент пен оқиға нәтижесінде әрекет орындалатын элемент бір элемент болса.

Мысалы, егер бізде инпут болса, біз оған focus жоғалту оқиғасының өңдеушісін байлап, осы оқиға орын алған кезде инпут мәтінімен бірнәрсе істей аламыз. Жоғарыда сипатталғанды жасайық. Бізде инпут берілсін:

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

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

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

Оған blur оқиғасының функция-өңдеушісін байлайық:

elem.addEventListener('blur', func);

Бұл func функциясының ішінде this объектісі қолжетімді болады, ол біздің инпутқа сілтеме жасайды:

function func() {
	console.log(this); // біздің элементке сілтемені қамтиды
}

Біздің инпуттың value атрибутының мазмұнын шығарайық:

function func() {
	console.log(this.value); // атрибут мазмұнын шығарамыз
}

Енді инпутқа бірдеңе мәтін жазайық:

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

Анонимді функцияны да қолдануға болады:

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

Инпут берілген. Осы инпутқа focus түскенде онда 1 санын жазыңыз, ал focus жоғалтқанда - 2 санын жазыңыз. Функция-өңдеуші ішінде инпутқа жүгіну үшін this объектісін пайдаланыңыз.

Батырма берілген, оның мәні 1 саны болып табылады. Осы батырманы әр басқан сайын оның мәні бірге артатындай етіңіз.