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 эмнени көрсөтөт? Жооп: ал undefined барабар болот (катуу режимде), анткени функция эч нерсеге байланышкан эмес.

Келгиле, практикада текшерип көрөлү. Бизде инпут берилсин:

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

Ошол инпутка parent функциясын байлап койолу, ал функция инпут фокусунан ажыраганда чакырылат:

"use strict";

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

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

Келгиле, эки жерде this тин мазмунун консольго чыгаралы: 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();
}