जावास्क्रिप्ट में बंद करने के लिए व्यावहारिक उपयोग?

एक क्लोजर एक फंक्शन और उस लेक्सिकल वातावरण का संयोजन है जिसके भीतर उस फंक्शन को घोषित किया गया था।

function outerFunc() {
   var name = "TutorialsPoint"; // name is a local variable created by outerFunc
   return function innerFunc() {
      // innerFunc() is the inner function, a closure
      console.log(name); // use variable declared in the parent function
   };
}
let f = outerFunc();
f()

बाहरीफंक () एक स्थानीय चर बनाता है जिसे नाम कहा जाता है और एक फ़ंक्शन जिसे इनरफंक () कहा जाता है। इनरफंक () फ़ंक्शन एक आंतरिक फ़ंक्शन है जिसे बाहरीफ़ंक () के अंदर परिभाषित किया गया है और यह केवल बाहरीफ़ंक () फ़ंक्शन के मुख्य भाग के भीतर उपलब्ध है।

ध्यान दें कि innerFunc() फ़ंक्शन का अपना कोई स्थानीय चर नहीं है। हालांकि, चूंकि आंतरिक कार्यों में बाहरी कार्यों के चरों तक पहुंच होती है, innerFunc() मूल फ़ंक्शन, बाहरीफ़ंक() में घोषित चर नाम तक पहुंच सकता है।

आप देख सकते हैं कि जब आउटरफंक ने निष्पादन पूरा किया तो वह नाम दायरे से बाहर हो गया। लेकिन अगर आप बारीकी से देखें, तो innerFunc जो लौटाया गया था और f को सौंपा गया था, उसके पास अभी भी नाम चर तक पहुंच है। इस प्रकार इनर फंक ने आउटरफंक के लेक्सिकल स्कोप पर एक क्लोजर का गठन किया।

व्यावहारिक उपयोग

निजी तरीकों का अनुकरण करना -जावा जैसी भाषाएं विधियों को निजी घोषित करने की क्षमता प्रदान करती हैं, जिसका अर्थ है कि उन्हें केवल उसी वर्ग में अन्य विधियों द्वारा ही बुलाया जा सकता है। जावास्क्रिप्ट ऐसा करने का एक मूल तरीका प्रदान नहीं करता है, लेकिन क्लोजर का उपयोग करके निजी तरीकों का अनुकरण करना संभव है।

उदाहरण

var counter = (() => {
   var privateCounter = 0;
   let changeBy = (val) => privateCounter += val;
   return {
      increment: () => changeBy(1),
      decrement: () => changeBy(-1),
      value: () => privateCounter
   };
})();
console.log(counter.value());
counter.increment();
counter.increment();
console.log(counter.value());
counter.decrement();
console.log(counter.value());

आउटपुट

0
2
1

इवेंट हैंडलर के साथ प्रयोग करें

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", alert(i))
}

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

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", () => alert(i))
}