Контексти this дар 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 дошта бошем:

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

Ба ин input функсияи parent-ро занҷир мекунем, ки вақте ки input фокуси худро гум мекунад, фарохонӣ мешавад:

"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); // истинод ба input-и моро чоп мекунад
	
	function child() {
		console.log(this); // undefined-ро чоп мекунад
	}
	child();
}

Ин кодро оғоз кунед, аз input фокусро гум кунед ва ба консол нигаред - шумо хоҳед дид, ки console.log-и якум ба консол истиноди ба input-и моро чоп мекунад, ва дуюм - танҳо undefined. Чунин ҳолате, ки вақте this ба таври ногаҳон ба он чизе ишора мекунад, ки ба мо лозим нест, гум шудани контекст номида мешавад.

Бигзор ҳоло дар ҳарду функсия мо value-и input-ро чоп кунем. Муайян кунед, ки дар сатрҳои коде, ки бо шарҳҳо нишон дода шудаанд, чӣ чоп мешавад:

"use strict";

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

function parent() {
	console.log(this.value); // чӣ чоп мекунад?
	
	function child() {
		console.log(this.value); // чӣ чоп мекунад?
	}
	child();
}