जावास्क्रिप्ट में this का फायदा

पहले कही गई बातों से this का विशेष लाभ अभी तक स्पष्ट नहीं है। आखिरकार, हैंडलर फ़ंक्शन के अंदर हमारे तत्व की पहुंच तो होगी ही - क्योंकि चर elem हमारे फ़ंक्शन func के लिए वैश्विक होगा:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// यहाँ हमारे तत्व के साथ elem चर उपलब्ध है
}

और, यह समझना मुश्किल नहीं है कि this की सामग्री और चर elem की सामग्री हमारे मामले में बराबर हैं:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true प्रिंट करेगा
}

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

आइए एक उदाहरण देखें। मान लीजिए हमारे पास 3 बटन हैं:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

आइए उन्हें चर में संदर्भ प्राप्त करें:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

आइए इन बटनों को एक ही फ़ंक्शन से बाँधें:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

और फ़ंक्शन के अंदर this.value प्रिंट करेंगे:

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

परिणाम यह होगा कि हमारे पास तीन बटन हैं। किसी भी बटन को दबाने से फ़ंक्शन func का कॉल होगा। इसके साथ ही, हर क्लिक पर this उस बटन का संदर्भ रखेगा जिस पर घटना हुई थी।

यानी हर प्रेस कंसोल में उस बटन का value प्रिंट करेगा, जिस पर क्लिक हुआ था, लेकिन यह काम एक ही फ़ंक्शन func करेगा! this के उपयोग का लाभ यहीं है।

5 पैराग्राफ दिए गए हैं जिनमें कुछ टेक्स्ट है। किसी भी पैराग्राफ पर क्लिक करने पर उसके टेक्स्ट के अंत में एक विस्मयादिबोधक चिह्न जोड़ें।

3 इनपुट दिए गए हैं, जिनमें कुछ संख्याएँ लिखी हैं। किसी भी इनपुट में फोकस खोने पर उसमें मौजूद संख्या का वर्ग करें।