जावास्क्रिप्ट में परिणामी क्लोजर के चर और सुविधाओं की घोषणाओं का उपयोग करना

मुझे यह नोट लिखने के लिए प्रेरित किया गया था कि हेबे पर लेख "वार, लेट या कॉन्स्टेंस? चर और ईएस 6 के दायरे की समस्याएं और टिप्पणियाँ, साथ ही ज़कस एन की पुस्तक "ईसीएमएस्क्रिप्ट 5 की समझ" के संगत भाग। मैंने जो पढ़ा है, उसके आधार पर, मैं इस नतीजे पर पहुंचा कि var या let के उपयोग का आकलन करने में सब कुछ इतना सरल नहीं है। लेखकों और टिप्पणीकारों का मानना ​​है कि ब्राउज़रों के पुराने संस्करणों का समर्थन करने की आवश्यकता के अभाव में, यह पूरी तरह से संस्करण के उपयोग को छोड़ देने के साथ-साथ डिफ़ॉल्ट रूप से पुराने के बजाय कुछ सरलीकृत निर्माणों का उपयोग करने के लिए समझ में आता है।

उपरोक्त सामग्री में इन विज्ञापनों के दायरे के बारे में पहले ही कहा जा चुका है, इसलिए मैं केवल कुछ अस्पष्ट बिंदुओं पर ध्यान देना चाहूंगा।

इसके साथ शुरू करने के लिए, मैं फौरन फंक्शन्स (तुरंत आमंत्रित फंक्शन एक्सप्रेशन, आईआईएफई) के लूप में अभिव्यक्तियों पर विचार करना चाहूंगा।

let func1 = []; for (var i = 0; i < 3; i++) { func1.push(function(i) { return function() { console.log(i); } }(i)); } func1.forEach(function(func) { func(); }); /*    0 newECMA6add.js:4:59 1 newECMA6add.js:4:59 2 newECMA6add.js:4:59 */ 

या आप का उपयोग कर उनके बिना कर सकते हैं:

 let func1 = []; for (let i = 0; i < 3; i++) { func1.push(function() { console.log(i); }); } func1.forEach(function(func) { func(); }); /*     0 newECMA6add.js:4:37 1 newECMA6add.js:4:37 2 newECMA6add.js:4:37 */ 

ज़कस एन। का दावा है कि समान परिणाम देने वाले दोनों समान उदाहरण, समान रूप से काम करते हैं:

"यह लूप बिल्कुल उस लूप की तरह काम करता है जो var और IIFE का उपयोग करता है लेकिन यकीनन क्लीनर है"

हालांकि, वह खुद, थोड़ा आगे, अप्रत्यक्ष रूप से खंडन करता है।

तथ्य यह है कि चलो का उपयोग करते समय लूप का प्रत्येक पुनरावृत्ति एक अलग स्थानीय चर i बनाता है, जबकि सरणी में भेजे गए कार्यों में बाइंडिंग प्रत्येक पुनरावृत्ति से अलग चर को भी जाता है।

इस विशेष मामले में, परिणाम वास्तव में अलग नहीं है, लेकिन क्या होगा अगर हम कोड को थोड़ा जटिल करते हैं?

 let func1 = []; for (var i = 0; i < 3; i++) { func1.push(function(i) { return function() { console.log(i); } }(i)); ++i; } func1.forEach(function(func) { func(); }); /*    0 newECMA6add.js:4:59 2 newECMA6add.js:4:59 */ 

यहां, ++ i को जोड़ने पर , हमारा परिणाम काफी अनुमानित था, क्योंकि हमने फ़ंक्शन को उन मानों के साथ कहा था जो कॉल के समय प्रासंगिक थे, यहां तक ​​कि जब लूप स्वयं पास हो जाता है, इसलिए बाद के ऑपरेशन ++ i ने सरणी में फ़ंक्शन के लिए पारित मूल्य को प्रभावित नहीं किया, क्योंकि यह पहले से ही है। i के विशिष्ट मूल्य के साथ फ़ंक्शन (i) में बंद किया गया था।

अब आईआईएफई के बिना लेट- वर्जन से तुलना करें

 let func1 = []; for (let i = 0; i < 3; i++) { func1.push(function() { console.log(i); }); ++i; } func1.forEach(function(func) { func(); }); /*    1 newECMA6add.js:4:37 3 newECMA6add.js:4:37 */ 

परिणाम, जाहिरा तौर पर, बदल गया है, और इस परिवर्तन की प्रकृति यह है कि हमने फ़ंक्शन को तुरंत मान के साथ नहीं बुलाया, लेकिन फ़ंक्शन ने चक्र के विशिष्ट पुनरावृत्तियों पर क्लोज़र में उपलब्ध मानों को लिया।

क्या हो रहा है इसका सार समझने के लिए, दो सरणियों के साथ उदाहरणों पर विचार करें। और शुरुआत के लिए, आइए देखें, बिना, आइए देखें :

 let func1 = [], func2 = []; for (var i = 0; i < 3; i++) { func2.push(function() { console.log(++i); }); func1.push(function() { console.log(++i); }); ++i; } func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*    5 newECMA6add.js:6:37 6 newECMA6add.js:6:37 7 newECMA6add.js:5:37 8 newECMA6add.js:5:37 */ 

अब तक सब कुछ स्पष्ट है - कोई बंद नहीं है (हालांकि हम कह सकते हैं कि यह है, लेकिन वैश्विक दायरे के लिए, हालांकि यह पूरी तरह से सही नहीं है, क्योंकि i की पहुंच अनिवार्य रूप से हर जगह है), यानी, इसी तरह, लेकिन एक स्थानीय क्षेत्र के साथ जाहिर है, चर मैं एक समान प्रविष्टि होगी:

 let func1 = [], func2 = []; function test() { for (var i = 0; i < 3; i++) { func2.push(function() { console.log(++i); }); func1.push(function() { console.log(++i); }); ++i; } } test(); func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*     5 newECMA6add.js:7:41 6 newECMA6add.js:7:41 7 newECMA6add.js:6:41 8 newECMA6add.js:6:41 */ 

दोनों उदाहरणों में, निम्नलिखित होता है:

1. चक्र i == 2 के अंतिम पुनरावृत्ति की शुरुआत में, फिर 1 (++ i) द्वारा वृद्धि हुई है, और अंत में 1 और i + ++ से जोड़ा जाता है, परिणामस्वरूप, पूरे चक्र i == 4 के अंत में।

2. func1 और func2 सरणियों में स्थित कार्यों को एक-एक करके कहा जाता है , और उनमें से प्रत्येक में समान चर मैं क्रमिक रूप से बढ़ा हुआ होता है, जो कि इसके दायरे के सापेक्ष बंद होता है, जो विशेष रूप से ध्यान देने योग्य है जब हम एक वैश्विक चर के साथ काम नहीं कर रहे हैं, लेकिन एक स्थानीय के साथ।

IIFE जोड़ें।
पहला विकल्प:

 let func1 = [], func2 = []; for (var i = 0; i < 3; i++) { func2.push(function(i) { return function() { console.log(++i); } }(i)); func1.push(function(i) { return function() { console.log(++i); } }(i)); ++i; } func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*    1 newECMA6add.js:6:56 3 newECMA6add.js:6:56 1 newECMA6add.js:5:56 3 newECMA6add.js:5:56 */ 

दूसरा विकल्प:

 let func1 = [], func2 = []; for (var i = 0; i < 3; i++) { func2.push(function(i) { return function() { console.log(i); } }(++i)); func1.push(function(i) { return function() { console.log(i); } }(++i)); ++i; } func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*    2 newECMA6add.js:6:56 1 newECMA6add.js:5:56 */ 

पहले मामले में IIFE जोड़ते समय , हमने बस i के निश्चित मानों को फ़ंक्शन (i) ( 0 और 2 , क्रमशः चक्र के पहले और दूसरे पास के दौरान) कहा, और उन्हें 1 से बढ़ा दिया, प्रत्येक फ़ंक्शन दूसरे से अलग है, क्योंकि यहां एक आम चर के लिए बंद है। लूप नहीं है, इस तथ्य के कारण कि लूप के पास के दौरान मूल्य मैं तुरंत प्रसारित किया गया था। दूसरे मामले में, लूप वैरिएबल को भी बंद नहीं किया गया है, लेकिन वहां मूल्य एक साथ वेतन वृद्धि के साथ प्रेषित किया गया था, इसलिए पहले पास i == 4 के अंत में, और लूप आगे नहीं गया। लेकिन, मैं इस तथ्य पर ध्यान आकर्षित करता हूं कि प्रत्येक फ़ंक्शन के लिए आंतरिक रूप से बाहरी कार्यों से चर के बंद होने, पहले और दूसरे दोनों प्रकारों में मौजूद हैं। उदाहरण के लिए:

 let func1 = [], func2 = []; for (var i = 0; i < 3; i++) { func2.push(function(i) { return function() { console.log(++i); } }(i)); func1.push(function(i) { return function() { console.log(++i); } }(i)); ++i; } func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*    1 newECMA6add.js:6:56 3 newECMA6add.js:6:56 1 newECMA6add.js:5:56 3 newECMA6add.js:5:56 2 newECMA6add.js:6:56 4 newECMA6add.js:6:56 2 newECMA6add.js:5:56 4 newECMA6add.js:5:56 */ 

ध्यान दें: भले ही आप एक फ़ंक्शन के साथ चक्र को फ्रेम करते हैं, लेकिन स्वाभाविक रूप से आम बंद नहीं होगा।

अब आइए के बिना, क्रमशः आइए स्टेटमेंट पर विचार करें।

 let func1 = [], func2 = []; for (let i = 0; i < 3; i++) { func2.push(function() { console.log(++i); }); func1.push(function() { console.log(++i); }); ++i; } func1.forEach(function(func) { func(); }); func2.forEach(function(func) { func(); }); /*    2 newECMA6add.js:6:41 4 newECMA6add.js:6:41 3 newECMA6add.js:5:41 5 newECMA6add.js:5:41 */ 

और यहाँ, हमने फिर से लूप वेरिएबल में एक शॉर्ट सर्किट का गठन किया, और एक नहीं, बल्कि दो, और अलग नहीं, बल्कि कॉमन, जो कि तार्किक है, चक्र में लेट के जाने -माने सिद्धांत को देखते हुए।

नतीजतन, हमारे पास है कि पहले बंद में, फ़ंक्शन को सरणियों में कॉल करने से पहले, मूल्य i == 1 है , और दूसरे में i == 3 । ये वे मान हैं जो i ++ और लूप पुनरावृत्ति से पहले प्राप्त चर हैं, लेकिन लूप ब्लॉक में सभी निर्देशों के बाद, और, वे प्रत्येक विशिष्ट पुनरावृत्ति के लिए बंद हैं।

फिर func1 एरे में स्थित फ़ंक्शन को बुलाया जाता है और वे दोनों क्लोजर में संबंधित चर को बढ़ाते हैं और परिणामस्वरूप पहले i == 2 , और दूसरे में i == 4 ।

आगे func2 वेतन वृद्धि के लिए कॉल और क्रमशः i == 3 और 5 मिलता है।

मैंने जानबूझकर func2 और func1 को ब्लॉक के अंदर इस तरह से रखा है कि उनके स्थान से स्वतंत्रता अधिक स्पष्ट रूप से दिखाई दे रही थी, और लूप चर को बंद करने के तथ्य पर पाठक का ध्यान आकर्षित करने के लिए।

अंत में, मैं एक तुच्छ उदाहरण दूंगा जिसका उद्देश्य क्लोज़र की समझ को मजबूत करना और लेट होने की गुंजाइश है:

 let func1 = []; { let i = 0; func1.push(function() { console.log(i); }); ++i; } func1.forEach(function(func) { func(); }); console.log(i); /* 1 newECMA6add.js:5:34 ReferenceError: i is not definednewECMA6add.js:10:1 */ 

हमारे पास कुल में क्या है

1. फंसे हुए कार्यों को तुरंत बुलाया जाना लूप में कार्यों में चलने योग्य लेट चर का उपयोग करने के बराबर नहीं है, और, कुछ मामलों में, विभिन्न परिणामों की ओर जाता है।

2. इस तथ्य के कारण कि जब एक पुनरावृत्ति के लिए लेट घोषणा का उपयोग किया जाता है, तो प्रत्येक पुनरावृत्ति में एक अलग स्थानीय चर बनाया जाता है, कचरा कलेक्टर द्वारा अनावश्यक डेटा के निपटान के बारे में सवाल उठता है। इस बिंदु पर, मैं मानता हूं, मैं शुरू में ध्यान केंद्रित करना चाहता था, यह संदेह करते हुए कि बड़ी संख्या में बड़ी संख्या में चर बनाने, क्रमशः, लूप संकलक को धीमा कर देगा, हालांकि, जब केवल चर घोषणाओं का उपयोग करके एक परीक्षण सरणी को सॉर्ट किया जाता है, तो यह लगभग निष्पादन के समय में एक लाभ दिखाता है। 100,000 कोशिकाओं की एक सरणी के लिए दो बार:


उसी समय, निष्पादन का समय व्यावहारिक रूप से निर्देशों की उपस्थिति / अनुपस्थिति से स्वतंत्र था:

याऔर
नोट: मैं समझता हूं कि गति की जानकारी नई नहीं है, लेकिन पूर्णता के लिए मुझे लगता है कि ये दो उदाहरण देने लायक थे।

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