JavaScriptда контекст билан ишлаш асослари

Фарз қилайлик, бизда func номли бирор функция бор, ичида this ишлатилган:

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

Бу функцияда this нимага ишора қилади? Биз билмаймиз. Ва JavaScript ҳам билмайди. Ва функциянинг ўзи ҳам билмайди. Яъни функция яратилган пайтда this аниқ нимага ишора қилаётгани аниқланмаган. Ва бу фақат функция чақирилган пайтдагина аниқланади.

Фарз қилайлик, бизда бирор инпут бор:

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

Бу инпутга бизнинг func функциямизни шундай боглайликки, у инпут фокус йўқотганида бажарилсин. Энди функция бажарилган пайтда this бизнинг инпутимизга ишора қилади:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // фокус йўқотганда 'text' чиқади
}

Лекин бизда битта инпут эмас, бир нечта инпут бўлиши мумкин:

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

Ва биз бу инпутларнинг ҳар бирига бизнинг func функциямизни боглашимиз мумкин. Бу ҳолда биринчи элемент учун this функция чақирилган пайтда унга ишора қилади, иккинчиси учун эса - унга.

Амалиётда бу func функцияси ичидаги this қайси инпутда биз фокус йўқотганимизга боглиқ эканлигини билдиради:

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нинг бу хусусияти жуда қулай - биз фақат битта функция яратамиз ва уни истаган миқдордаги инпутларга боглай оламиз. Агар this вокеа юз берган элементга ишора қилмаса, у ҳолда бундай бўлар эди - биз ҳар бир инпут учун ўзининг бир хил кодли функциясини яратишга мажбур бўлардик!