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();
}