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