संक्षेप में
सारांश
अपने सरलतम रूप में, इस तकनीक का उद्देश्य फ़ंक्शन स्कोप के अंदर कोड को लपेटना है ।
यह मदद करता है की संभावना कम हो जाती है:
- अन्य अनुप्रयोगों / पुस्तकालयों के साथ टकराव
- प्रदूषणकारी श्रेष्ठ (वैश्विक सबसे अधिक संभावना) क्षेत्र
यह नहीं करता है का पता लगाने जब दस्तावेज़ तैयार है - यह किसी तरह का नहीं है document.onloadऔर न हीwindow.onload
यह आमतौर पर Immediately Invoked Function Expression (IIFE)या के रूप में जाना जाता है Self Executing Anonymous Function।
कोड समझाया गया
var someFunction = function(){ console.log('wagwan!'); };
(function() { /* function scope starts here */
console.log('start of IIFE');
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})(); /* function scope ends */
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
ऊपर दिए गए उदाहरण में, फ़ंक्शन में परिभाषित कोई भी चर (यानी का उपयोग करके घोषित किया गया var) "निजी" होगा और फ़ंक्शन के दायरे में केवल सुलभ होगा (जैसा कि विविन पालीथ इसे कहते हैं)। दूसरे शब्दों में, ये चर फ़ंक्शन के बाहर दिखाई नहीं देते / पहुंच योग्य नहीं होते हैं। लाइव डेमो देखें ।
जावास्क्रिप्ट में फंक्शन स्कूपिंग है। "फ़ंक्शन में परिभाषित पैरामीटर और चर फ़ंक्शन के बाहर दिखाई नहीं देते हैं, और फ़ंक्शन के भीतर कहीं भी परिभाषित एक चर फ़ंक्शन के भीतर हर जगह दिखाई देता है।" ("जावास्क्रिप्ट: द गुड पार्ट्स" से)।
अधिक जानकारी
वैकल्पिक कोड
अंत में, पहले पोस्ट किया गया कोड निम्नानुसार भी किया जा सकता है:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
};
myMainFunction(); // I CALL "myMainFunction" FUNCTION HERE
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
लाइव डेमो देखें ।
जड़
Iteration 1
एक दिन, किसी ने शायद सोचा कि "myMainFunction 'नामकरण से बचने का एक तरीका होना चाहिए, क्योंकि हम चाहते हैं कि इसे तुरंत निष्पादित किया जाए।"
यदि आप मूल बातों पर वापस जाते हैं, तो आपको पता चलता है कि:
expression: एक मूल्य का मूल्यांकन करने वाला कुछ। अर्थात3+11/xstatement: कुछ करने के लिए कोड की लाइन (एस) लेकिन यह एक मूल्य का मूल्यांकन नहीं करता है । अर्थातif(){}
इसी तरह, फंक्शन एक्सप्रेशन एक वैल्यू का मूल्यांकन करते हैं। और एक परिणाम (मुझे लगता है!) यह है कि उन्हें तुरंत लागू किया जा सकता है:
var italianSayinSomething = function(){ console.log('mamamia!'); }();
तो हमारा और अधिक जटिल उदाहरण बन जाता है:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
}();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
लाइव डेमो देखें ।
Iteration 2
अगला कदम यह है कि " var myMainFunction =अगर हमारे पास इसका उपयोग नहीं है तो भी क्यों है !"।
इसका उत्तर सरल है: इसे हटाने का प्रयास करें, जैसे नीचे:
function(){ console.log('mamamia!'); }();
लाइव डेमो देखें ।
यह काम नहीं करेगा क्योंकि "फ़ंक्शन घोषणाएं अदृश्य नहीं हैं" ।
चाल यह है कि हटाकर var myMainFunction =हमने फ़ंक्शन अभिव्यक्ति को एक फ़ंक्शन घोषणा में बदल दिया । इस पर अधिक जानकारी के लिए "संसाधन" में लिंक देखें।
अगला सवाल यह है कि "मैं इसे फंक्शन एक्सप्रेशन के रूप में क्यों नहीं रख सकता var myMainFunction =?
इसका उत्तर "आप कर सकते हैं", और वास्तव में कई तरीके हैं जो आप ऐसा कर सकते हैं: एक +, एक !, एक -, या शायद कोष्ठक की एक जोड़ी में लपेटकर (जैसा कि अब यह सम्मेलन द्वारा किया गया है), और अधिक मैं मानता हूं। उदाहरण के रूप में:
(function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.
या
+function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console
या
-function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console
एक बार प्रासंगिक संशोधन को एक बार हमारे "वैकल्पिक कोड" में जोड़ दिया जाता है, तो हम उसी कोड पर लौटते हैं, जैसा "कोड समझाया गया" उदाहरण में उपयोग किया गया था
var someFunction = function(){ console.log('wagwan!'); };
(function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
इसके बारे में और पढ़ें Expressions vs Statements:
डेमिस्टिफ़ाइंग स्कोप्स
एक बात आश्चर्यचकित कर सकती है कि "क्या होता है जब आप फ़ंक्शन के अंदर वेरिएबल को ठीक से परिभाषित नहीं करते हैं - अर्थात इसके बजाय एक सरल असाइनमेंट करते हैं?"
(function() {
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
myOtherFunction = function(){ /* oops, an assignment instead of a declaration */
console.log('haha. got ya!');
};
})();
myOtherFunction(); // reachable, hence works: see in the console
window.myOtherFunction(); // works in the browser, myOtherFunction is then in the global scope
myFunction(); // unreachable, will throw an error, see in the console
लाइव डेमो देखें ।
मूल रूप से, यदि एक चर जिसे इसके मौजूदा दायरे में घोषित नहीं किया गया था, उसे एक मान दिया गया है, तो "एक स्कोप श्रृंखला दिखाई देती है जब तक कि यह वैरिएबल को नहीं ढूंढता या वैश्विक स्कोप को हिट नहीं करता है (जिस बिंदु पर यह इसे बनाएगा)"।
जब एक ब्राउज़र वातावरण (बनाम सर्वर नेटवर्क जैसे नोडज) में वैश्विक स्कोप को windowऑब्जेक्ट द्वारा परिभाषित किया जाता है। इसलिए हम कर सकते हैं window.myOtherFunction()।
इस विषय पर मेरी "अच्छी प्रथाओं" टिप हमेशा varकिसी भी चीज़ को परिभाषित करते समय उपयोग करने के लिए है : चाहे वह एक संख्या, वस्तु या फ़ंक्शन हो, और वैश्विक दायरे में भी हो। यह कोड को बहुत सरल बनाता है।
ध्यान दें:
- जावास्क्रिप्ट में नहीं है
block scope(अपडेट: ईएस 6 में जोड़ा गया स्थानीय गुंजाइश ब्लॉक करें ।)
- जावास्क्रिप्ट केवल
function scopeऔर global scope( windowएक ब्राउज़र वातावरण में गुंजाइश)
इसके बारे में और पढ़ें Javascript Scopes:
साधन
अगला कदम
एक बार जब आप इस IIFEअवधारणा को प्राप्त करते हैं , तो यह होता है module pattern, जो आमतौर पर इस IIFE पैटर्न का लाभ उठाकर किया जाता है। मज़े करो :)