html
जावास्क्रिप्ट में this कीवर्ड की समझ: एक व्यापक गाइड
सामग्री सूची
परिचय
जावास्क्रिप्ट, एक बहुमुखी और शक्तिशाली प्रोग्रामिंग भाषा के रूप में, डेवलपर्स को विभिन्न उपकरण और कीवर्ड प्रदान करती है जो ऑब्जेक्ट्स और उनके व्यवहारों को प्रबंधित और हेरफेर करने के लिए होते हैं। ऐसे एक महत्वपूर्ण कीवर्ड में से एक है this। विभिन्न संदर्भों में this कैसे काम करता है इसे समझना कुशल और बग-मुक्त जावास्क्रिप्ट कोड लिखने के लिए महत्वपूर्ण है। यह गाइड this कीवर्ड की बारीकियों में गहराई से जाती है, इसके व्यवहार का शोध करती है ग्लोबल स्कोप्स, ऑब्जेक्ट लिटरल्स, फंक्षन्स, और एरो फंक्षन्स में। चाहे आप एक शुरुआत करने वाले हों या बुनियादी ज्ञान वाले डेवलपर, this में महारत हासिल करने से आपकी जावास्क्रिप्ट प्रवीणता में सुधार होगा।
जावास्क्रिप्ट में this कीवर्ड
ग्लोबल स्कोप
ग्लोबल निष्पादन संदर्भ में (किसी भी फंक्षन के बाहर), this ग्लोबल ऑब्जेक्ट को संदर्भित करता है। एक ब्राउज़र परिवेश में, ग्लोबल ऑब्जेक्ट window होता है।
उदाहरण:
1 |
console.log(this); // Outputs: Window { ... } |
व्याख्या:
- जब console.log(this) ग्लोबल स्कोप में निष्पादित किया जाता है, तो यह window ऑब्जेक्ट को लॉग करता है, जिसमें ब्राउज़र विंडो से संबंधित गुण और विधियाँ शामिल होती हैं।
ऑब्जेक्ट लिटरल्स के अंदर
जब ऑब्जेक्ट मेथड के अंदर उपयोग किया जाता है, तो this स्वयं ऑब्जेक्ट को संदर्भित करता है।
उदाहरण:
1 2 3 4 5 6 7 8 9 |
const user = { name: 'John Doe', gender: 'Male', getDetails: function() { console.log(this); } }; user.getDetails(); |
आउटपुट:
1 2 3 4 5 |
{ name: 'John Doe', gender: 'Male', getDetails: [Function: getDetails] } |
व्याख्या:
- यहाँ, getDetails मेथड के अंदर this user ऑब्जेक्ट को संदर्भित करता है। this को लॉग करने से user ऑब्जेक्ट के सभी गुण और विधियाँ प्रदर्शित होती हैं।
फंक्षन्स और मेथड्स के भीतर
this का मान इस बात पर निर्भर करता है कि फंक्षन को कैसे बुलाया जाता है:
-
रेगुलर फंक्षन्स:
- रेगुलर फंक्षन्स में, this ग्लोबल ऑब्जेक्ट (window ब्राउज़र्स में) को संदर्भित करता है जब स्ट्रिक्ट मोड में नहीं होता है।
उदाहरण:
12345function showThis() {console.log(this);}showThis(); // Outputs: Window { ... } -
मेथड्स:
- ऑब्जेक्ट मेथड्स में, this उस ऑब्जेक्ट को संदर्भित करता है जिसका मेथड है।
उदाहरण:
123456789const car = {brand: 'Tesla',model: 'Model S',getCarInfo: function() {console.log(this.brand + ' ' + this.model);}};car.getCarInfo(); // Outputs: Tesla Model S
एरो फंक्षन्स और this
एरो फंक्षन्स, this के संदर्भ में रेगुलर फंक्षन्स की तुलना में अलग व्यवहार करते हैं। इनके अपने this नहीं होते हैं; इसके बजाय, ये उस संलग्न संदर्भ के this मान को कैप्चर करते हैं जिस समय इन्हें परिभाषित किया गया होता है।
उदाहरण:
1 2 3 4 5 6 7 8 9 |
const developer = { name: 'Alice', skills: ['JavaScript', 'React'], getSkills: () => { console.log(this); } }; developer.getSkills(); // Outputs: Window { ... } |
व्याख्या:
- हालांकि getSkills developer ऑब्जेक्ट के अंदर एक मेथड है, एरो फंक्षन का उपयोग करने से this ग्लोबल ऑब्जेक्ट (window) को संदर्भित करता है बजाय developer ऑब्जेक्ट के। यह अक्सर अप्रत्याशित व्यवहार का कारण बनता है और यह एक सामान्य भूल है।
सर्वोत्तम प्रथाएँ
-
ऑब्जेक्ट मेथड्स के लिए रेगुलर फंक्षन्स का उपयोग करें:
- सुनिश्चित करने के लिए कि this ऑब्जेक्ट को संदर्भित करता है, मेथड्स के लिए रेगुलर फंक्षन एक्सप्रेशन्स का उपयोग करें।
सिफारिश की जाती है:
123getDetails: function() {console.log(this);}बचना:
123getDetails: () => {console.log(this);} -
शॉर्टहैंड मेथड डेफिनिशन्स का लाभ उठाएँ:
- मॉडर्न जावास्क्रिप्ट मेथड्स को संक्षिप्त तरीके से परिभाषित करने की अनुमति देता है बिना function कीवर्ड के, सही this संदर्भ बनाए रखते हुए।
उदाहरण:
12345678const user = {name: 'Jane Doe',getName() {console.log(this.name);}};user.getName(); // Outputs: Jane Doe -
एरो फंक्षन्स के साथ सावधानी बरतें:
- जब आप संलग्न स्कोप से this संदर्भ बनाए रखना चाहते हैं, जैसे कि कॉलबैक्स या ईवेंट हैंडलर्स में, एरो फंक्षन्स का उपयोग करें।
-
स्ट्रिक्ट मोड को समझें:
- स्ट्रिक्ट मोड में, this रेगुलर फंक्षन्स में undefined रहता है जब तक कि इसे किसी ऑब्जेक्ट से बाँधा न गया हो, जिसका उपयोग अनजाने में ग्लोबल ऑब्जेक्ट संदर्भों को रोकने में मदद करता है।
निष्कर्ष
जावास्क्रिप्ट में this कीवर्ड एक मौलिक अवधारणा है जो शक्तिशाली और जटिल दोनों हो सकती है। इसका मान निष्पादन संदर्भ के आधार पर गतिशील रूप से बदलता है, जिसके लिए डेवलपर्स को बग्स और अनपेक्षित व्यवहारों को रोकने के लिए स्पष्ट समझ की आवश्यकता होती है। ग्लोबल स्कोप्स, ऑब्जेक्ट लिटरल्स, रेगुलर फंक्षन्स, और एरो फंक्षन्स में this के व्यवहार के अंतर को समझकर, डेवलपर्स अधिक पूर्वानुमेय और मेंटेन करने योग्य कोड लिख सकते हैं। सर्वोत्तम प्रथाओं का पालन करना, जैसे कि ऑब्जेक्ट मेथड्स के लिए रेगुलर फंक्षन्स का उपयोग करना और एरो फंक्षन्स के साथ सावधानी बरतना, this के प्रभावी उपयोग को सुनिश्चित करता है। this में महारत हासिल करने से न केवल आपकी जावास्क्रिप्ट कौशल में वृद्धि होती है बल्कि यह अधिक उन्नत प्रोग्रामिंग पैराडाइम्स में गहराई से प्रवेश करने का आधार भी बनती है।
कीवर्ड्स: JavaScript, this keyword, ऑब्जेक्ट लिटरल्स, एरो फंक्षन्स, ग्लोबल स्कोप, फंक्षन्स, मेथड्स, प्रोग्रामिंग, DeveloperGuide, JavaScript ट्यूटोरियल
अतिरिक्त संसाधन
- MDN Web Docs: this कीवर्ड
- JavaScript.info: this कीवर्ड
- Eloquent JavaScript: this को समझना
- You Don't Know JS: स्कोप & क्लोजर्स
नोट: यह लेख AI द्वारा उत्पन्न किया गया है।