JavaScript में टाइमर और संदर्भ की हानि

टाइमर का उपयोग करते समय ईवेंट हैंडलर में संदर्भ की हानि की समस्या हमारा इंतजार कर रही है। आइए एक उदाहरण पर नजर डालते हैं।

मान लीजिए कि हमारे पास एक इनपुट है:

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

मान लीजिए कि इस इनपुट पर क्लिक करने पर एक अनाम फ़ंक्शन निष्पादित होता है और इस फ़ंक्शन के अंदर एक टाइमर शुरू होता है, जो हर सेकंड कंसोल में कुछ न कुछ आउटपुट करता है:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // कंसोल में कुछ आउटपुट करते हैं
	}, 1000);
});

अभी तक सब कुछ सही ढंग से काम कर रहा है। लेकिन अब मान लीजिए कि हम अपने इनपुट का value कंसोल में आउटपुट करना चाहते हैं - हमें एक आश्चर्य मिलेगा: कंसोल में undefined आउटपुट होगा:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // undefined आउटपुट होगा
	}, 1000);
});

पूरी बात यह है कि हमारे पास फ़ंक्शन के अंदर फ़ंक्शन बन जाता है: एक बाहरी अनाम फ़ंक्शन है, जो क्लिक पर कॉल होता है और एक आंतरिक अनाम फ़ंक्शन है, जिसे टाइमर द्वारा कॉल किया जाता है। बाहरी फ़ंक्शन में this इनपुट की ओर इशारा करता है, लेकिन आंतरिक में - नहीं। यहाँ संदर्भ की हानि होती है।

undefined क्यों आउटपुट होता है, और कंसोल में त्रुटि क्यों नहीं आती है, जैसा कि पिछले पाठों में हुआ था? क्योंकि setInterval के माध्यम से कॉल होने वाले फ़ंक्शन के अंदर this window की ओर इशारा करता है।

इसका मतलब है कि हम window ऑब्जेक्ट से value प्रॉपर्टी पढ़ने की कोशिश कर रहे हैं, इस तरह: window.value, और इसमें ऐसी कोई प्रॉपर्टी नहीं है, और हमें undefined मिलता है (त्रुटि नहीं)।

आइए self का परिचय देकर समस्या को ठीक करते हैं:

elem.addEventListener('click', function() {
	let self = this;
	
	setInterval(function() {
		console.log(self.value);
	}, 1000);
});

मान लीजिए कि ऐसा कोड दिया गया है:

<input type="button" id="elem" value="1">

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		this.value = Number(elem.value) + 1;
	}, 1000);
});

कोड के लेखक चाहते थे कि बटन दबाने पर, इस बटन का मान हर सेकंड 1 बढ़ जाए। हालाँकि, बटन दबाने पर कुछ भी नहीं होता है। लेखक के कोड की त्रुटि को सुधारें। एक पाठ लिखें जिसमें आप कोड के लेखक को स्पष्टीकरण देंगे कि उनकी त्रुटि क्यों हुई।