जावास्क्रिप्ट में यह कीवर्ड। पूरा * मैनुअल

* सबसे अधिक संभावना है, मुझे कुछ याद आया, लेकिन मुझे यकीन है कि टिप्पणियां मुझे यह बताएंगी

मैं अपनी व्यक्तिगत जरूरतों के लिए यह लेख लिख रहा हूं। यह योजना बनाई गई है कि इसमें उन सभी सवालों के जवाब होंगे जो छात्र मुझसे इस विषय पर पूछते हैं। अगर यह किसी और के लिए उपयोगी है - महान।


सामग्री।

1. परिचय
2. इस बारे में गलतफहमी
3. इसका मूल्य कैसे निर्धारित किया जाए

परिचय

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

this बारे में गलतफहमी

इस खोजशब्द के बारे में कई सामान्य गलत धारणाएँ हैं। मैं इस मुद्दे पर पहुंचने से पहले उन्हें जल्दी से दूर करना चाहता हूं।

यह एक शाब्दिक संदर्भ है।

यह धारणा अक्सर शुरुआती लोगों के बीच उत्पन्न होती है। उन्हें ऐसा लगता है कि this एक ऐसी वस्तु है जिसमें, गुणों की तरह, इस दायरे में सभी चर संग्रहीत हैं। यह गलत धारणा इस तथ्य से उपजी है कि एक विशेष मामले में, मोटे तौर पर, यह ऐसा है। यदि हम उच्चतम स्तर पर हैं, तो this window (ब्राउज़र में एक नियमित स्क्रिप्ट के मामले में) के बराबर है। और जैसा कि हम जानते हैं, शीर्ष स्तर पर घोषित सभी चर window गुणों के रूप में उपलब्ध हैं।

सामान्य तौर पर, यह सच नहीं है। यह सत्यापित करना आसान है।

 function test(){ const a = "     ,   "; console.log(this.a); } test(); //  ,    

यह वह वस्तु है जिससे विधि संबंधित है

फिर, यह कई विशिष्ट मामलों में सच है, लेकिन हमेशा नहीं। महत्वपूर्ण बात यह है कि फ़ंक्शन को कैसे कहा जाता है, न कि यह किसी वस्तु का गुण है। यह एक बहुत ही सरल तर्क से भी समझा जा सकता है: मान लीजिए कि एक ही फ़ंक्शन दो वस्तुओं की एक साथ संपत्ति है।

 const f = function(){ console.log(this); } const object1 = { method: f }; const object2 = { method: f }; 

तो इनमें से कौन सी वस्तु उसकी होगी?

महत्वपूर्ण! भले ही कोई वस्तु ES6 कक्षाओं का उपयोग करके बनाई गई हो, लेकिन यह इस बात की गारंटी नहीं देता है कि इसकी विधि हमेशा यही होगी। "सामान्य" भाषाओं के वर्गों से समानता से मूर्ख मत बनो।

यह एक जेडी तकनीक है, जिसे एक बार सीखने के बाद, हर जगह उपयोग करने की आवश्यकता होती है

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

इसका मूल्य कैसे निर्धारित किया जाए

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

1. क्या हम किसी फंक्शन के अंदर हैं?
   
   
   • हाँ: अगला आइटम देखें।
   • नहीं: this एक वैश्विक वस्तु के बराबर है।
   
   
   टिप्पणी

   शीर्ष-स्तरीय कोड में (किसी फ़ंक्शन के अंदर नहीं), this हमेशा एक वैश्विक ऑब्जेक्ट को संदर्भित करता है। ब्राउज़र में एक नियमित स्क्रिप्ट के मामले में, यह एक window ऑब्जेक्ट है। लेकिन सामान्य तौर पर, अलग-अलग मामले होते हैं।
   
2. क्या हम एरो फंक्शन के अंदर हैं?
   
   
   • हां: इसका मान उसी प्रकार है जैसे फ़ंक्शन में एक स्तर अधिक होता है (यानी जिसमें यह एक होता है)। पिछले चरण पर लौटें और इसके लिए एल्गोरिथ्म दोहराएं। यदि फ़ंक्शन किसी अन्य में निहित नहीं है, तो this एक वैश्विक ऑब्जेक्ट है।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   तीर फ़ंक्शन की मुख्य विशेषताओं में से एक तथाकथित "लेक्सिकल this " है। इसका मतलब यह है कि तीर फ़ंक्शन में इसका मान पूरी तरह से निर्धारित किया जाता है कि यह कहाँ (किस शाब्दिक संदर्भ में) बनाया गया था, और यह इस बात पर निर्भर नहीं करता है कि इसे बाद में कैसे कहा गया था। कभी-कभी यह वह नहीं है जिसकी हमें आवश्यकता है, लेकिन अधिक बार यह तीर के कार्यों को बहुत सुविधाजनक और पूर्वानुमान योग्य बनाता है।
   
3. क्या इस फ़ंक्शन को एक निर्माता (नए ऑपरेटर का उपयोग करके) के रूप में कहा जाता है?
   
   
   • हां: this एक नई वस्तु को संदर्भित करता है जो "निर्माणाधीन" है।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   विरासत में मिले ES6 वर्ग के कंस्ट्रक्टर के मामले में शायद यह अलग से निर्दिष्ट करने योग्य है। फिर, super() कॉल करने से पहले, इसका कोई मूल्य नहीं है (इसे एक्सेस करना एक त्रुटि का कारण होगा), और super() कॉल करने के बाद यह मूल वर्ग के नए ऑब्जेक्ट के बराबर होता है।
   
4. क्या यह फ़ंक्शन बाइंड का उपयोग करके बनाया गया है ?
   
   
   • हां: इस फ़ंक्शन का मान इस फ़ंक्शन को बनाते समय पहले तर्क के मान के बराबर होता है, जिसे हमने bind विधि में पारित किया था।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   bind पद्धति विधि की एक प्रतिलिपि बनाता है, इसे ठीक this और, वैकल्पिक रूप से, इसके लिए पहले कुछ तर्क देता है। वास्तव में, यह न केवल फ़ंक्शन की एक प्रति बनाता है, बल्कि, मैं, एक "विदेशी बाउंडफंक्शन ऑब्जेक्ट" बोली। विशेष रूप से इसका विदेशीवाद प्रकट होता है, जिसमें बार-बार कॉल करने के bind हम इसे नहीं बदल सकते। इसलिए, कड़ाई से बोलते हुए, इस पैराग्राफ में जवाब निम्नानुसार तैयार किया जाना चाहिए: यदि ऐसा है, तो this पहले कॉल के पहले तर्क के बराबर है, जिससे इस फ़ंक्शन का निर्माण हुआ।
   
5. क्या यह समारोह कहीं कॉलबैक या हैंडलर के रूप में पारित हुआ है?
   
   
   • हां: अकेले भगवान को पता है कि बुलाने पर यह क्या बराबर होगा। उस चीज़ के लिए दस्तावेज़ीकरण पढ़ें जो इसका कारण बनेगी।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   एक गैर-तीर और बाध्य फ़ंक्शन के लिए, इस का मूल्य उन परिस्थितियों पर निर्भर करता है जिनमें इसे बुलाया गया था। यदि आप इसे व्यक्तिगत रूप से नहीं कहते हैं, लेकिन इसे कहीं पास करते हैं, तो this मान आपके लिए अज्ञात मूल्य के साथ प्रतिस्थापित किया जा सकता है या नहीं भी हो सकता है।
   
   उदाहरण:
   
   

    `use strict` document.addEventListener('keydown', function(){ console.log(this); }); //    this === document.    DOM- this  currentTarget [1, 2, 3].forEach(function(){ console.log(this); }); //         ,  undefined. ?     . 

6. इस फ़ंक्शन को एप्लिकेशन या कॉल का उपयोग करके कहा जाता है?
   
   
   • हां: इस मामले में, this पहले तर्क को संबंधित विधि के बराबर कर देता है।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   इसे स्पष्ट रूप से सेट करने का दूसरा तरीका। अधिक ठीक, दो। हालांकि, इसके संदर्भ में this apply और call बीच कोई अंतर नहीं है, केवल अंतर यह है कि बाकी तर्क कैसे पारित किए जाते हैं।
   
7. क्या यह फ़ंक्शन किसी ऑब्जेक्ट प्रॉपर्टी के मूल्य के रूप में प्राप्त किया जाता है और तुरंत कहा जाता है?
   
   
   • हाँ: this उपरोक्त वस्तु के बराबर है।
   • नहीं: अगला पैराग्राफ देखें।
   
   
   टिप्पणी

   दरअसल, इस तंत्र से (साथ ही अन्य भाषाओं के साथ काम करने के अनुभव से) इस विश्वास के पैर बढ़ते हैं कि " this एक ऐसी विधि है जिसे" विधि "कहा जाता है। शायद मैं सिर्फ कोड लिखूंगा।
   
   

    'use strict'; const object1 = { method: function(){ console.log(this); } } const object2 = { method: object1.method } object1.method(); //    object1 -           object1['method'](); //  .        object2.method(); //    object2 -  " ",      ,         

8. क्या कोड सख्त मोड में निष्पादित होता है? ('सख्त उपयोग करें', ES6 मॉड्यूल)
   
   
   • हां: this undefined ।
   • नहीं: this एक वैश्विक वस्तु के बराबर है।
   
   
   टिप्पणी

   यदि हम इस बिंदु पर पहुंचते हैं, तो this किसी भी तंत्र द्वारा निर्धारित नहीं होता है जो इसे सेट करने की अनुमति देता है। यह कैसे पारित किया जा सकता है, इसके बारे में विभिन्न गलत धारणाएं हैं। उदाहरण के लिए, साक्षात्कार के दौरान वे अक्सर मुझे ऐसी बात बताते हैं:
   
   

    const obj = { test: function(){ (function(){ console.log(this); })(); //      } } obj.test(); //  ,     obj.   

   
   या, जैसा कि मैंने "गलतफहमी" खंड में कहा था, बहुत से लोग सोचते हैं कि यदि कोई फ़ंक्शन ईएस 6 कक्षाओं का उपयोग करके बनाई गई वस्तु का एक तरीका है, तो यह हमेशा इस ऑब्जेक्ट के बराबर होगा। यह भी सच नहीं है।
   
   इसलिए, अगर हम इस बिंदु पर पहुंचते हैं, तो हमारे फ़ंक्शन को कॉल करने की अन्य परिस्थितियां मायने नहीं रखती हैं। और यह सब नीचे आता है कि हम सख्त मोड में हैं या नहीं।
   
   ऐतिहासिक रूप से, "डिफ़ॉल्ट" के रूप में, this तरह के कार्यों के लिए एक वैश्विक वस्तु पारित की गई थी। इस दृष्टिकोण को बाद में असुरक्षित के रूप में मान्यता दी गई थी। ES5 ने एक सख्त मोड पेश किया जो ECMAScript के पुराने संस्करणों की कई समस्याओं को ठीक करता है। यह फ़ाइल या फ़ंक्शन की शुरुआत में उपयोग सख्त निर्देश के साथ शामिल है। इस मोड में, इसका "डिफ़ॉल्ट" मान undefined ।
   
   ES6 मॉड्यूल में, सख्त मोड डिफ़ॉल्ट रूप से सक्षम है।
   
   सख्त मोड को शामिल करने के लिए अन्य तंत्र भी हैं, उदाहरण के लिए, NodeJS में, सभी फ़ाइलों के लिए सख्त मोड को --use-strict ध्वज के साथ सक्षम किया जा सकता है।
   
   
   

यह, सामान्य तौर पर, सभी है। इसके मूल्य का निर्धारण, निश्चित रूप से, हम चाहते हैं की तुलना में कम सरल है, लेकिन यह उतना मुश्किल नहीं है जितना यह लग सकता है। इस एल्गोरिथ्म को एक गुणन तालिका के रूप में जानें - और आपको फिर से इसके साथ कोई समस्या नहीं होगी। ऐसी बातें।

पीएस उपयोगकर्ता ऐंगिस ने सुझाव दिया कि जब निर्माण के साथ उपयोग किया जाता है , तो वस्तु एक संदर्भ के रूप में उसमें पारित हो जाती है जो वैश्विक वस्तु की जगह लेती है। शायद मैं इसे अपने क्लासिफायर में दर्ज नहीं करूंगा, क्योंकि 2019+ में मिलने की संभावना कम है। लेकिन किसी भी मामले में, यह एक दिलचस्प बिंदु है।

PPS उपयोगकर्ता rqrqrqrq ने सुझाव दिया कि new bind तुलना new उच्च प्राथमिकता है। क्लासिफायर के अनुरूप संशोधन पहले ही किया जा चुका है। धन्यवाद!