🧓🏻 ☺️ 🥅 जावास्क्रिप्ट निष्पादन संदर्भ और कॉल स्टैक ⬛️ ☄️ 🚊

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

निष्पादन का संदर्भ

निष्पादन संदर्भ, सरलीकृत शब्दों में, एक अवधारणा है जो पर्यावरण का वर्णन करता है जिसमें जावास्क्रिप्ट कोड निष्पादित होता है। कोड को हमेशा एक संदर्भ के अंदर निष्पादित किया जाता है।

▍ संदर्भ प्रकार चलाएँ

जावास्क्रिप्ट में तीन प्रकार के निष्पादन संदर्भ हैं:

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

निष्पादन स्टैक

निष्पादन स्टैक, जिसे कॉल स्टैक भी कहा जाता है, LIFO स्टैक है जिसका उपयोग कोड निष्पादन के दौरान बनाए गए निष्पादन संदर्भों को संग्रहीत करने के लिए किया जाता है।

जब JS इंजन स्क्रिप्ट को संसाधित करना शुरू करता है, तो इंजन एक वैश्विक निष्पादन संदर्भ बनाता है और इसे वर्तमान स्टैक पर रखता है। जब किसी फ़ंक्शन को कॉल करने की कमांड का पता लगाया जाता है, तो इंजन इस फ़ंक्शन के लिए एक नया निष्पादन संदर्भ बनाता है और इसे स्टैक के शीर्ष पर रखता है।

इंजन एक फ़ंक्शन करता है जिसका निष्पादन संदर्भ स्टैक के शीर्ष पर है। जब फ़ंक्शन पूरा हो जाता है, तो इसका संदर्भ स्टैक से हटा दिया जाता है और नियंत्रण उस संदर्भ में स्थानांतरित कर दिया जाता है जो स्टैक के पिछले तत्व में होता है।

हम निम्नलिखित उदाहरण के साथ इस विचार का पता लगाएंगे:

 let a = 'Hello World!'; function first() { console.log('Inside first function'); second(); console.log('Again inside first function'); } function second() { console.log('Inside second function'); } first(); console.log('Inside Global Execution Context');

इस कोड के निष्पादित होने पर कॉल स्टैक कैसे बदल जाएगा, यहां बताया गया है।

कॉल स्थिति

जब उपरोक्त कोड को ब्राउज़र में लोड किया जाता है, तो जावास्क्रिप्ट इंजन एक वैश्विक निष्पादन संदर्भ बनाता है और इसे वर्तमान कॉल स्टैक पर रखता है। first() फ़ंक्शन पर कॉल करते समय, इंजन इस फ़ंक्शन के लिए एक नया संदर्भ बनाता है और इसे स्टैक के शीर्ष पर रखता है।

जब second() फ़ंक्शन को first() फ़ंक्शन से कॉल किया जाता है, तो इस फ़ंक्शन के लिए एक नया निष्पादन संदर्भ बनाया जाता है और इसे स्टैक पर भी धकेल दिया जाता है। second() फ़ंक्शन के पूरा होने के बाद, इसका संदर्भ स्टैक से हटा दिया जाता है और नियंत्रण को इसके नीचे स्टैक पर स्थित निष्पादन संदर्भ में स्थानांतरित कर दिया जाता है, अर्थात, first() फ़ंक्शन के संदर्भ में।

जब first() फ़ंक्शन बाहर निकलता है, तो इसका संदर्भ स्टैक से पॉप होता है और नियंत्रण वैश्विक संदर्भ में स्थानांतरित हो जाता है। सभी कोड निष्पादित होने के बाद, इंजन वर्तमान स्टैक से वैश्विक निष्पादन संदर्भ को पुनः प्राप्त करता है।

संदर्भ बनाने और कोड चलाने के बारे में

अब तक, हमने इस बारे में बात की है कि जेएस इंजन निष्पादन संदर्भों का प्रबंधन कैसे करता है। अब बात करते हैं कि निष्पादन संदर्भ कैसे बनाए जाते हैं, और उनके बनने के बाद क्या होता है। विशेष रूप से, हम निष्पादन संदर्भ बनाने के चरण और कोड निष्पादन के चरण के बारे में बात कर रहे हैं।

निष्पादन संदर्भ बनाने की अवस्था

जावास्क्रिप्ट कोड निष्पादित होने से पहले, निष्पादन संदर्भ बनाया जाता है। इसके निर्माण की प्रक्रिया में, तीन क्रियाएं की जाती हैं:

यह मान निर्धारित है और this (यह बंधन) बाध्य है।
LexicalEnvironment घटक बनाया गया है।
VariableEnvironment घटक बनाया गया है।

वैचारिक रूप से, निष्पादन संदर्भ को निम्नानुसार दर्शाया जा सकता है:

 ExecutionContext = { ThisBinding = <this value>, LexicalEnvironment = { ... }, VariableEnvironment = { ... }, }

यह बंधन

वैश्विक निष्पादन संदर्भ में, इसमें वैश्विक ऑब्जेक्ट का संदर्भ है (जैसा कि पहले ही उल्लेख किया गया है, ब्राउज़र में यह एक window ऑब्जेक्ट है)।

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

 let foo = { baz: function() { console.log(this); } } foo.baz();    // 'this'    'foo',    'baz'              //    'foo' let bar = foo.baz; bar();       // 'this'     window,                 //

लयात्मक वातावरण

ईएस 6 विनिर्देश के अनुसार, लेक्सिकल एनवायरनमेंट एक शब्द है जिसका उपयोग पहचानकर्ताओं और व्यक्तिगत चर और ईसीएमएस्क्रिप्ट कोड के लेक्सिकल नेस्टिंग की संरचना के आधार पर कार्यों के बीच संबंध को परिभाषित करने के लिए किया जाता है। लेक्सिकल वातावरण में एनवायरनमेंट रिकॉर्ड और बाहरी लेक्सिकल वातावरण का संदर्भ होता है, जो null हो सकता है।

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

शाब्दिक वातावरण में दो घटक होते हैं:

एक पर्यावरण का रिकॉर्ड। यह वह जगह है जहां चर और फ़ंक्शन घोषणाओं को संग्रहीत किया जाता है।
बाहरी वातावरण से जुड़ाव। इस तरह के लिंक की उपस्थिति इंगित करती है कि लेक्सिकल वातावरण की पैतृक लेक्सिकल वातावरण (गुंजाइश) तक पहुंच है।

दो प्रकार के शाब्दिक वातावरण हैं:

वैश्विक पर्यावरण (या वैश्विक निष्पादन संदर्भ) एक शाब्दिक वातावरण है जिसमें बाहरी वातावरण नहीं है। बाह्य पर्यावरण के लिए वैश्विक पर्यावरण संदर्भ null । वैश्विक वातावरण में (पर्यावरण रिकॉर्ड में), अंतर्निहित भाषा संस्थाएं (जैसे Object , Array , और इसी तरह) उपलब्ध हैं जो वैश्विक ऑब्जेक्ट के साथ जुड़ी हुई हैं, उपयोगकर्ता द्वारा परिभाषित वैश्विक चर भी हैं। इस वातावरण में इसका मान एक वैश्विक वस्तु की ओर इशारा करता है।
फ़ंक्शन का वातावरण जिसमें, पर्यावरण रिकॉर्ड में, उपयोगकर्ता द्वारा घोषित चर संग्रहीत किए जाते हैं। बाहरी वातावरण का संदर्भ एक वैश्विक वस्तु और फ़ंक्शन के बाहरी दोनों को इंगित कर सकता है।

पर्यावरण रिकॉर्ड दो प्रकार के होते हैं:

एक घोषित पर्यावरण रिकॉर्ड जो चर, कार्यों और मापदंडों को संग्रहीत करता है।
एक पर्यावरण वस्तु रिकॉर्ड जिसका उपयोग वैश्विक संदर्भ में चर और कार्यों के बारे में जानकारी संग्रहीत करने के लिए किया जाता है।

नतीजतन, वैश्विक वातावरण में, एक पर्यावरण रिकॉर्ड को एक वस्तु पर्यावरण रिकॉर्ड द्वारा और एक फ़ंक्शन वातावरण में, एक घोषणात्मक पर्यावरण रिकॉर्ड द्वारा दर्शाया जाता है।

ध्यान दें कि फ़ंक्शन के वातावरण में, पर्यावरण के घोषित रिकॉर्ड में arguments ऑब्जेक्ट भी होता है, जो सूचकांकों और फ़ंक्शन के पास दिए गए तर्कों के मूल्यों के बीच पत्राचार को संग्रहीत करता है, और ऐसे तर्कों की संख्या के बारे में जानकारी।

लेक्सिकल वातावरण को निम्नलिखित छद्मकोश के रूप में दर्शाया जा सकता है:

 GlobalExectionContext = { LexicalEnvironment: {   EnvironmentRecord: {     Type: "Object",     //        }   outer: <null> } } FunctionExectionContext = { LexicalEnvironment: {   EnvironmentRecord: {     Type: "Declarative",     //        }   outer: <        > } }

पर्यावरण चर

एक परिवर्तनीय पर्यावरण भी एक शाब्दिक वातावरण है जिसका पर्यावरण रिकॉर्ड मौजूदा निष्पादन के संदर्भ में VariableStatement कमांड का उपयोग करके बनाए गए बाइंडिंग को संग्रहीत करता है।

चूँकि चरों का वातावरण भी एक शाब्दिक वातावरण होता है, इसलिए इसमें शाब्दिक पर्यावरण के सभी उपर्युक्त गुण होते हैं।

ES6 में, LexicalEnvironment और VariableEnvironment घटकों के बीच एक अंतर है। यह इस तथ्य में समाहित है कि पूर्व का उपयोग फ़ंक्शन और वेरिएबल्स की घोषणाओं को स्टोर करने के लिए किया जाता है, जो let और const कीवर्ड का उपयोग करके घोषित किया जाता है, और बाद का उपयोग केवल var कीवर्ड का उपयोग करके घोषित किए गए वेरिएबल बाइंडिंग को स्टोर करने के लिए किया जाता है।

उदाहरणों पर विचार करके देखें कि हमने अभी क्या चर्चा की:

 let a = 20; const b = 30; var c; function multiply(e, f) { var g = 20; return e * f * g; } c = multiply(20, 30);

इस कोड के लिए निष्पादन संदर्भ का एक योजनाबद्ध प्रतिनिधित्व इस तरह दिखेगा:

 GlobalExectionContext = { ThisBinding: <Global Object>, LexicalEnvironment: {   EnvironmentRecord: {     Type: "Object",     //          a: < uninitialized >,     b: < uninitialized >,     multiply: < func >   }   outer: <null> }, VariableEnvironment: {   EnvironmentRecord: {     Type: "Object",     //          c: undefined,   }   outer: <null> } } FunctionExectionContext = { ThisBinding: <Global Object>, LexicalEnvironment: {   EnvironmentRecord: {     Type: "Declarative",     //          Arguments: {0: 20, 1: 30, length: 2},   },   outer: <GlobalLexicalEnvironment> }, VariableEnvironment: {   EnvironmentRecord: {     Type: "Declarative",     //          g: undefined   },   outer: <GlobalLexicalEnvironment> } }

जैसा कि आपने शायद देखा है कि, वैरिएबल और कॉन्स्टेंट ने let और const कीवर्ड का उपयोग करके घोषित किया है, कोई संबद्ध मूल्य नहीं है, और वेरिएबल का उपयोग करते हुए घोषित किए गए वैरिएबल undefined ।

ऐसा इसलिए है क्योंकि संदर्भ के निर्माण के दौरान, कोड चर और कार्यों की घोषणाओं की खोज करता है, जबकि कार्यों की घोषणाएं पूरी तरह से पर्यावरण में संग्रहीत होती हैं। जब चर का उपयोग किया जाता है, तो चर के मान undefined , और let या const का उपयोग let समय const असमान रहते हैं।

यही कारण है कि आप घोषित किए जाने से पहले चर के साथ घोषित चर का उपयोग कर सकते हैं (हालांकि वे undefined ), लेकिन जब आप घोषित किए let से पहले दिए गए और const चर या स्थिरांक को एक्सेस करने का प्रयास करते हैं, तो एक त्रुटि होती है। ।

जिसे हमने अभी वर्णित किया है उसे "उत्थापन चर" कहा जाता है। परिवर्तनीय घोषणाओं उन्हें किसी भी मान असाइन करने के संचालन करने से पहले अपने शाब्दिक दायरे के शीर्ष पर "वृद्धि"।

▍ कोड निष्पादन की स्टेज

यह शायद इस सामग्री का सबसे सरल हिस्सा है। इस स्तर पर, मूल्यों को चर को सौंपा गया है और कोड निष्पादित किया गया है।

कृपया ध्यान दें कि यदि, कोड के निष्पादन के दौरान, जेएस इंजन घोषणा के स्थान पर let कीवर्ड का उपयोग करके घोषित चर का मान नहीं पा सकता है, तो यह इस चर को undefined मान प्रदान करेगा।

परिणाम

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

प्रिय पाठकों! आपको क्या लगता है कि निष्पादन संदर्भ और कॉल स्टैक के अलावा जावास्क्रिप्ट डेवलपर्स के लिए क्या जानना उपयोगी है?

जावास्क्रिप्ट निष्पादन संदर्भ और कॉल स्टैक