JavaScriptda Kontekstni Yo'qotish

Faraz qilaylik, bizda funksiya ichida funksiya mavjud. Tashqi funksiyani parent, va ichki funksiyani esa child deb ataymiz:

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

Oldingi darslardan bilasizki, agar tashqi funksiyada qandaydir o'zgaruvchi belgilansa - u ichki funksiyada ham mavjud bo'ladi:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // 'abcde' ni chiqaradi
	}
	child(); // ichki funksiyani chaqiramiz
}

parent(); // tashqi funksiyani chaqiramiz

Biroq, bir nuans mavjud: ichki funksiya tashqi funksiyaning barcha o'zgaruvchilariga kirish huquqiga ega, lekin this ga kirish huquqiga ega emas. Ya'ni: agar tashqi funksiya qandaydir DOM elementiga bog'langan bo'lsa, undagi this shu elementni ko'rsatadi, lekin ichki funksiyadagi this - ko'rsatmaydi!

Xo'sh, ichki funksiyadagi this nimani ko'rsatadi? Javob: u undefined ga teng bo'ladi (qat'iy rejimda), chunki funksiya hech narsaga bog'lanmagan.

Keling, amalda tekshiramiz. Faraz qilaylik, bizda input maydoni mavjud:

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

Keling, ushbu inputga parent funksiyasini bog'laymiz, u input tomonidan fokus yo'qotilganda chaqiriladi:

"use strict";

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

// Fokus yo'qotilganda chaqiriladi:
function parent() {
	// bu yerda qandaydir kod bo'ladi
	
	function child() {
		// bu yerda qandaydir kod bo'ladi
	}
	child(); // ichki funksiyani chaqiramiz
}

Keling, this ning mazmunini ikkita joyda: parent funksiyasi ichida va child funksiyasi ichida konsolga chiqaramiz:

"use strict";

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

function parent() {
	console.log(this); // bizning inputga havolani chiqaradi
	
	function child() {
		console.log(this); // undefined ni chiqaradi
	}
	child();
}

Ushbu kodni ishga tushiring, inputdan fokusni olib tashlang va konsolga qarang - siz ko'rasiz, birinchi console.log konsolda bizning inputga havolani chiqaradi, ikkinchisi esa shunchaki undefined ni chiqaradi. this biz kutgandek emas, balki bizga kerakli narsani ko'rsatmaydigan bunday holat kontekstni yo'qotish deb ataladi.

Endi faraz qilaylik, birinchi va ikkinchi funksiyalarda biz inputning value sini chiqaramiz. Izohlar bilan belgilangan kod qatorlarida nima chiqishini aniqlang:

"use strict";

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

function parent() {
	console.log(this.value); // nima chiqadi?
	
	function child() {
		console.log(this.value); // nima chiqadi?
	}
	child();
}