फोटो: जिज्ञासु लिलियाना साहब (सीसी बाय 2.0)

जावास्क्रिप्ट एक बहु-प्रतिमान भाषा है जो ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग और डायनेमिक लिंकिंग का समर्थन करती है। डायनामिक लिंकिंग एक शक्तिशाली अवधारणा है जो आपको रनटाइम पर जावास्क्रिप्ट कोड की संरचना को बदलने की अनुमति देती है, लेकिन ये अतिरिक्त शक्ति और लचीलेपन कुछ भ्रम की कीमत पर हासिल किए जाते हैं, जिनमें से अधिकांश जावास्क्रिप्ट में this व्यवहार से संबंधित हैं।

गतिशील लिंकिंग

डायनामिक बाइंडिंग के साथ, कॉल करने की विधि की परिभाषा रन टाइम पर होती है, न कि कंपाइल टाइम पर। जावास्क्रिप्ट this और प्रोटोटाइप श्रृंखला के साथ करता है। विशेष रूप से, विधि के अंदर, this कॉल के दौरान निर्धारित किया जाता है, और this कैसे विधि परिभाषित किया गया था, इसके आधार पर इसका मूल्य अलग होगा।

चलो एक खेल खेलते हैं। मैंने उसे फोन किया " this यहाँ क्या है?"

 const a = { a: 'a' }; const obj = { getThis: () => this, getThis2 () { return this; } }; obj.getThis3 = obj.getThis.bind(obj); obj.getThis4 = obj.getThis2.bind(obj); const answers = [ obj.getThis(), obj.getThis.call(a), obj.getThis2(), obj.getThis2.call(a), obj.getThis3(), obj.getThis3.call(a), obj.getThis4(), obj.getThis4.call(a) ]; 

इस बारे में सोचें कि answers सरणी में मान क्या answers और console.log() साथ अपने उत्तरों की जांच करें। अनुमान लगाया?

आइए पहले मामले से शुरू करें और क्रम में जारी रखें। obj.getThis() undefined रिटर्न देता है, लेकिन क्यों? एरो फ़ंक्शंस का अपना कभी नहीं होता है। इसके बजाय, वे हमेशा इसे लेक्सिकल स्कोप ( लगभग लेक्सिकल इस ) से लेते हैं। ES6 मॉड्यूल की जड़ के लिए, लेक्सिकल क्षेत्र का एक undefined मूल्य this । obj.getThis.call(a) भी उसी कारण से परिभाषित नहीं किया गया है। एरो फ़ंक्शंस के लिए, this .call() या .bind() साथ भी ओवरराइड नहीं किया जा सकता है। this हमेशा शाब्दिक डोमेन से लिया जाएगा।

obj.getThis2() मेथड कॉल के दौरान बाइंडिंग हो जाती है। यदि पहले इस फ़ंक्शन के लिए कोई बाध्यकारी नहीं था, तो यह इसके लिए बाध्य हो this (चूंकि यह एक तीर फ़ंक्शन नहीं है)। इस मामले में, this एक ओब्जेक्ट ऑब्जेक्ट है जो उस समय विधि से बंधा होता है जिसे विधि कहा जाता है . या [squareBracket] संपत्ति एक्सेस सिंटैक्स। ( नोट अंतर्निहित बंधन )

obj.getThis2.call(a) थोड़ा अधिक जटिल है। call() विधि दिए गए इस मान और वैकल्पिक तर्कों के साथ एक फ़ंक्शन को कॉल करती है। दूसरे शब्दों में, विधि this बंधन को obj.getThis2.call(a) .call() पैरामीटर से प्राप्त करती है, इसलिए obj.getThis2.call(a) ऑब्जेक्ट को a वापस करता a । ( नोट स्पष्ट बंधन )

obj.getThis3 = obj.getThis.bind(obj); के मामले में obj.getThis3 = obj.getThis.bind(obj); हम this बाउंड फंक्शन के साथ एक ऐरो फंक्शन पाने की कोशिश कर रहे हैं, जो कि हम पहले ही समझ चुके हैं, काम नहीं करेगा, इसलिए हम क्रमशः obj.getThis3() और obj.getThis3.call(a) लिए undefined हो obj.getThis3() हैं।

नियमित तरीकों के लिए, आप बाध्य कर सकते हैं, इसलिए obj.getThis4() रिटर्न obj , जैसा कि अपेक्षित था। वह पहले से ही अपने बंधन यहाँ obj.getThis4 = obj.getThis2.bind(obj); , और obj.getThis4.call(a) पहली बाइंडिंग को ध्यान में रखता है और a बजाय obj देता a ।

मुड़ी हुई गेंद

हम उसी समस्या को हल करेंगे, लेकिन इस बार हम ऑब्जेक्ट का वर्णन करने के लिए सार्वजनिक क्षेत्रों के साथ एक class उपयोग करते हैं (इस लेखन के समय चरण 3 नवाचार डिफ़ॉल्ट रूप से क्रोम में उपलब्ध हैं और @babel/plugin-offer-class-properties ):

 class Obj { getThis = () => this getThis2 () { return this; } } const obj2 = new Obj(); obj2.getThis3 = obj2.getThis.bind(obj2); obj2.getThis4 = obj2.getThis2.bind(obj2); const answers2 = [ obj2.getThis(), obj2.getThis.call(a), obj2.getThis2(), obj2.getThis2.call(a), obj2.getThis3(), obj2.getThis3.call(a), obj2.getThis4(), obj2.getThis4.call(a) ]; 

जारी रखने से पहले जवाब के बारे में सोचें।

क्या आप तैयार हैं?

obj2.getThis2.call(a) को छोड़कर सभी कॉल ऑब्जेक्ट की एक आवृत्ति लौटाते हैं। obj2.getThis2.call(a) रिटर्न a । एरो फ़ंक्शंस अभी भी this अपने शाब्दिक वातावरण से प्राप्त this हैं। वर्गीय गुणों के लिए this कैसे शाब्दिक वातावरण से परिभाषित किया गया है, इसमें अंतर है। अंदर, वर्ग के गुणों की शुरूआत कुछ इस तरह से होती है:

 class Obj { constructor() { this.getThis = () => this; } ... 

दूसरे शब्दों में, तीर फ़ंक्शन को कंस्ट्रक्टर के संदर्भ में परिभाषित किया गया है। चूंकि यह एक वर्ग है, इसलिए एक उदाहरण बनाने का एकमात्र तरीका new कीवर्ड का उपयोग करना है ( new को छोड़ना एक त्रुटि का परिणाम होगा)। new कीवर्ड जो सबसे महत्वपूर्ण काम करता है, वह ऑब्जेक्ट का एक नया उदाहरण बनाता है और इसे कंस्ट्रक्टर में बाँध देता है। यह व्यवहार, अन्य व्यवहारों के साथ जो हमने ऊपर उल्लेख किया है, बाकी को स्पष्ट करना चाहिए।

निष्कर्ष

क्या आप सफल हुए? this कैसे जावास्क्रिप्ट में व्यवहार करता है की एक अच्छी समझ आपको जटिल समस्याओं को डीबग करने में बहुत समय बचाएगी। यदि आपने उत्तरों में गलती की है, तो इसका मतलब है कि आपको थोड़ा अभ्यास करने की आवश्यकता है। उदाहरणों के साथ अभ्यास करें, फिर वापस जाएं और अपने आप को फिर से परीक्षण करें जब तक आप परीक्षण नहीं चला सकते हैं और किसी और को समझा सकते हैं कि विधियां वापस क्यों आती हैं।

यदि यह आपकी अपेक्षा से अधिक कठिन था, तो आप अकेले नहीं हैं। मैंने इस विषय पर बहुत सारे डेवलपर्स से पूछा और मुझे लगता है कि अब तक उनमें से केवल एक ने ही इस काम को अंजाम दिया है।

डायनामिक तरीकों की खोज के रूप में जो आप शुरू कर सकते हैं .apply() .bind() .apply() .bind() या .apply() वर्ग विधियों और तीर फ़ंक्शन के अतिरिक्त के साथ और अधिक जटिल हो गया है। शायद आपको एक बार फिर इस पर ध्यान देना चाहिए। याद रखें कि तीर फ़ंक्शंस हमेशा शाब्दिक दायरे से लेते हैं, और this class वास्तव में हुड के तहत वर्ग के निर्माता द्वारा शाब्दिक रूप से सीमित है। यदि आपको कभी this संदेह है, तो याद रखें कि आप इसके मूल्य की जांच करने के लिए डिबगर का उपयोग कर सकते हैं।

याद रखें कि कई जावास्क्रिप्ट कार्यों को सुलझाने में आप इसके बिना कर सकते हैं। मेरे अनुभव में, लगभग सभी चीज़ों को शुद्ध कार्यों के संदर्भ में पुनर्परिभाषित किया जा सकता है जो स्पष्ट पैरामीटर के रूप में उपयोग किए जाने वाले सभी तर्कों को लेते हैं ( this एक अंतर्निहित चर के रूप में माना जा सकता है)। शुद्ध कार्यों के माध्यम से वर्णित तर्क नियतात्मक है, जो इसे अधिक परीक्षण योग्य बनाता है। इसके अलावा, इस दृष्टिकोण के साथ, कोई साइड इफेक्ट नहीं हैं, इसलिए, this हेरफेर के क्षणों के विपरीत, आपको कुछ भी तोड़ने की संभावना नहीं है। हर बार जब this सेट किया जाता है, तो इसके मूल्य के आधार पर कुछ टूट सकता है।

हालांकि, कभी-कभी this उपयोगी होता है। उदाहरण के लिए, बड़ी संख्या में वस्तुओं के बीच तरीकों का आदान-प्रदान करने के लिए। कार्यात्मक प्रोग्रामिंग में भी, this उपयोग ऑब्जेक्ट के अन्य तरीकों तक पहुंचने के लिए किया जा सकता है ताकि मौजूदा बीजों के ऊपर नए बीजगणित के निर्माण के लिए आवश्यक बीजीय परिवर्तनों को लागू किया जा सके। तो, यूनिवर्सल .flatMap() this.map() और this.constructor.of() का उपयोग करके प्राप्त किया जा सकता है।

Wksmirnowa और VIBaH_dev का अनुवाद करने में मदद के लिए धन्यवाद