जावास्क्रिप्ट में this की तीर वाले इवेंट हैंडलर में गलती

आजकल हर जगह सामान्य फंक्शन के बजाय तीर फंक्शन (arrow functions) का उपयोग करना फैशन बन गया है। हालांकि, इन फंक्शन में एक दिक्कत है - वे this को सेव नहीं करते। आइए देखें कि इसके कारण हमें किस समस्या का सामना करना पड़ सकता है।

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

<button>text</button>

चलिए इस बटन का रेफरेंस एक वेरिएबल में प्राप्त करते हैं:

let button = document.querySelector('button');

आइए तीर फंक्शन (arrow function) का उपयोग करके बटन पर एक इवेंट हैंडलर (event handler) लगाएं:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

यहीं हमें एक आश्चर्य मिलता है: तीर फंक्शन में this उस एलिमेंट को रेफर नहीं करेगा जहाँ इवेंट (event) हुआ था।

आइए देखें कि इसके लिए हम क्या कर सकते हैं।

पहला समाधान

हम this का उपयोग छोड़ सकते हैं और उस वेरिएबल का उपयोग कर सकते हैं, जिससे इवेंट (event) बाउंड (bound) है:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

दूसरा समाधान

हम event.target के माध्यम से उस एलिमेंट को प्राप्त कर सकते हैं जिससे इवेंट (event) बाउंड (bound) है:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

तीसरा समाधान

हम तीर फंक्शन (arrow function) का उपयोग छोड़ सकते हैं और एक सामान्य फंक्शन (regular function) का उपयोग कर सकते हैं:

button.addEventListener('click', function() {
	console.log(this.textContent);
});