JavaScript'те контекст менен иштөөнүн негиздери

Бизде бир функция func болсун, анын ичинде this колдонулат:

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

Бул функциянын ичиндеги this эмнени көрсөтөт? Биз билбейбиз. Да JavaScript да билбейт. Функцияның өзү да билбейт. Башкача айтканда, функция түзүлгөн учурда this так эмнени көрсөтөрү аныкталган эмес. Ал гана мындан кийин аныкталат, бул функция чакырылганда.

Бизде бир input болсун:

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

Бул input'ко биздин func функциябызды input фокусунан айрылганда аткарыла тургандай кылып байлайлы. Эми функция аткарылган учурда this биздин input'ту көрсөтөт:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // фокус жоголгондо 'text' чыгарат
}

Бирок бизде бир input эмес, бир нече input болушу мүмкүн:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Жана биз бул input'тордун ар бирине биздин func функциябызды байлай алабыз. Бул учурда биринчи элемент үчүн this функция чакырылган учурда аны көрсөтөт, экинчиси үчүн - өзүн көрсөтөт.

Практикада бул this функциянын ичинде биз кайсы input'тон фокусубузду жоготконубузга жараша болорун билдирет:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // же 'text1', же 'text2' чыгарат
}

Жалпысынан алганда, this'тин мындай өзгөчөлүгү өтө ыңгайлуу - биз бир гана функция түзөбүз жана аны каалаган канча input'ко байлай алабыз. Эгерде this окуя болгон элементти көрсөтпөгөндө, анда биз муну ишке ашыра алмак эмес эле - ар бир input үчүн бирдей кодду камтыган өз функцияңды түзүшүңө мажбур болмок элең!