जावास्क्रिप्ट में कॉन्टेक्स्ट के साथ काम करने की मूल बातें

मान लीजिए कि हमारे पास कोई फ़ंक्शन func है, जिसके अंदर this का उपयोग किया गया है:

function func() {
	console.log(this.value);
}

इस फ़ंक्शन में this क्या इंगित करता है? और हम नहीं जानते। और जावास्क्रिप्ट नहीं जानता। और स्वयं फ़ंक्शन नहीं जानता। यानी निर्माण के समय फ़ंक्शन में, this वास्तव में क्या इंगित करता है, यह परिभाषित नहीं है। और यह तभी परिभाषित होगा, जब यह फ़ंक्शन कॉल किया जाएगा।

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

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

आइए इस इनपुट से अपने फ़ंक्शन func को बांधें ताकि यह इनपुट द्वारा फोकस खोने पर निष्पादित हो। अब फ़ंक्शन के निष्पादन के समय this हमारे इनपुट को इंगित करेगा:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // फोकस खोने पर 'text' आउटपुट करेगा
}

लेकिन हमारे पास एक इनपुट नहीं, बल्कि कई हो सकते हैं:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

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

व्यवहार में इसका मतलब है कि फ़ंक्शन के अंदर this इस बात पर निर्भर करता है कि किस इनपुट पर हमने फोकस खोया है:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // या तो 'text1' या 'text2' आउटपुट करेगा
}

सामान्य तौर पर, this की यह विशेषता बहुत सुविधाजनक है - हम केवल एक फ़ंक्शन बनाते हैं और इसे किसी भी संख्या में इनपुट से बांधते हैं। यदि this उस तत्व की ओर इशारा नहीं करता, जिसमें घटना घटी है, तो हम ऐसा नहीं कर पाते - हमें प्रत्येक इनपुट के लिए समान कोड वाला अपना फ़ंक्शन बनाना पड़ता!