JavaScriptда контекст йўқолиши

Фарз қилайлик, бизда функциянинг ичида функция бор. Ташқи функцияни parent деб атаймиз, ва ичкини - child:

function parent() {
	function child() {
		
	}
}

Олдинги дарслардан билсангиз, агар ташқи функцияда бирор ўзгарувчини белгиланса - у ички функцияда мумкин бўлади:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // 'abcde' ни кўрсатади
	}
	child(); // ички функцияни чақирамиз
}

parent(); // ташқи функцияни чақирамиз

Бирок, бир нуқта бор: ички функция ташқи функциянинг ҳамма ўзгарувчиларига кира олади, лекин this га кира олмайди. Яъни: агар ташқи функция бирор DOM элементига богланган бўлса, ундаги this шу элементни кўрсатади, лекин ички функциянинг this - кўрсатмайди!

У ҳолда ички функциядаги this nimani кўрсатади? Жавоб: у undefined га тенг бўлади (қаттиқ режимда), чунки функция ҳеч нарсага богланмаган.

Келинг, амалиётда текшириб кўрамиз. Фарз қилайлик, бизда инпут берилган:

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

Бу инпутга parent функцияни боглаймиз, у инпут фокусни йўқотганида чақирилади:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Фокус йўқолганида чақирилади:
function parent() {
	// бу ерда қандайдир код бўлади
	
	function child() {
		// бу ерда қандайдир код бўлади
	}
	child(); // фарзанд функцияни чақирамиз
}

Келинг, this ning мазмунини икки жойда консольга чиқарайлик: parent функциясининг ичида ва child функциясининг ичида:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this); // бизнинг инпутга ҳаволани чиқаради
	
	function child() {
		console.log(this); // undefined ни чиқаради
	}
	child();
}

Бу кодни ишга туширинг, инпутдан фокусни йўкотинг ва консольга қаранг - сиз кўрасизки, биринчи console.log консольга бизнинг инпутга ҳаволани чиқаради, ва иккинчи - жуда undefined ни. Бундай вазият, қачонки this кутганнимиздан бошқа нарсани кўрсатса, контекст йўқолиши деб аталади.

Энди фарз қилайлик, битта ва иккинчи функцияда биз инпутнинг value сини чиқарамиз. Аниқланг, изохлар билан белгиланган код сатрларида нима чиқади:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this.value); // нима чиқади?
	
	function child() {
		console.log(this.value); // нима чиқади?
	}
	child();
}