परिचय
जावास्क्रिप्ट this कीवर्ड उस ऑब्जेक्ट को संदर्भित करता है जिससे यह संबंधित होता है। इसका मान इस बात पर निर्भर करता है कि इसे कहाँ और कैसे कॉल किया गया है:
- अकेले या रेगुलर फ़ंक्शन में: ग्लोबल ऑब्जेक्ट (ब्राउज़र में
window, स्ट्रिक्ट मोड मेंundefined) - मेथड में: ऑनर ऑब्जेक्ट
- इवेंट लिस्टनर में: इवेंट प्राप्त करने वाला HTML एलिमेंट
call(),apply(),bind()के साथ: स्पष्ट रूप से सेट किया गया मान
उदाहरण
निम्न कोड जावास्क्रिप्ट this आइडेंटिफायर के लिए है:
<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>this कीवर्ड</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; color: red; } </style> </head> <body> <h1>जावास्क्रिप्ट this आइडेंटिफायर</h1> <div class="sample"></div> <div class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> विभिन्न संदर्भों में 'this' किस ऑब्जेक्ट को संदर्भित करता है, देखने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const thisRef = this; // ग्लोबल स्कोप में this const sampleEle = document.querySelector(".sample"); function test() { return this; } const testObj = { a: 22, check() { return this; }, }; document.querySelector(".Btn").addEventListener("click", () => { sampleEle.innerHTML = "सामान्य फ़ंक्शन में this = " + test() + "<br>"; sampleEle.innerHTML += "मेथड में this = " + testObj.check() + "<br>"; sampleEle.innerHTML += "किसी स्कोप के बिना this = " + thisRef + "<br>"; }, false); </script> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
'यहाँ क्लिक करें' बटन पर क्लिक करने पर:
this बाइंडिंग नियम (प्राथमिकता क्रम)
- New बाइंडिंग -
new Fn()→thisनया ऑब्जेक्ट है - Explicit बाइंडिंग -
call/apply/bind→thisस्पष्ट आर्गुमेंट है - Implicit बाइंडिंग -
obj.method()→thisऑब्जेक्ट है - Default बाइंडिंग - स्टैंडअलोन फ़ंक्शन →
thisग्लोबल/undefined (स्ट्रिक्ट मोड)
एरो फ़ंक्शन्स
एरो फ़ंक्शन्स का अपना this नहीं होता - वे आसपास के लेक्सिकल स्कोप से this इनहेरिट करते हैं।
