एक फंक्शन को कॉल करने के पांच तरीके

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

जावास्क्रिप्ट सीखने के पहले चरणों में, शुरुआती आमतौर पर सोचते हैं कि इसमें कार्य उसी तरह से काम करते हैं, जैसे सी # में कहते हैं। लेकिन जावास्क्रिप्ट में कॉलिंग फ़ंक्शंस के लिए तंत्र में कई महत्वपूर्ण अंतर हैं, और उनके बारे में अनभिज्ञता उन त्रुटियों में परिणाम कर सकती है जिन्हें ढूंढना आसान नहीं होगा।

आइए एक साधारण फ़ंक्शन लिखें जो तीन तत्वों की एक सरणी लौटाता है - इस के वर्तमान मूल्य और फ़ंक्शन के लिए पारित दो तर्क।

 function makeArray(arg1, arg2){ return [ this, arg1, arg2 ]; } 

सबसे आम तरीका: वैश्विक कॉल

शुरुआती अक्सर फ़ंक्शन की घोषणा करते हैं जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है। इस फ़ंक्शन को कॉल करना आसान है:

 makeArray('one', 'two'); // => [ window, 'one', 'two' ] 

एक पल रुकिए। window वस्तु कहां से आई? हमारे पास this window बराबर क्यों है?

जावास्क्रिप्ट में, कोई फर्क नहीं पड़ता कि स्क्रिप्ट ब्राउज़र में या किसी अन्य वातावरण में निष्पादित की जाती है, एक वैश्विक वस्तु हमेशा परिभाषित होती है। हमारी लिपि का कोई भी कोड जो किसी चीज़ के लिए "संलग्न" नहीं है (जो कि वस्तु घोषणा के बाहर स्थित है) वास्तव में एक वैश्विक वस्तु के संदर्भ में है। हमारे मामले में, makeArray केवल एक फ़ंक्शन नहीं है जो "स्वयं" चलता है। वास्तव में, makeArray एक वैश्विक ऑब्जेक्ट (एक ब्राउज़र में कोड निष्पादन के मामले में) window की एक विधि है। यह साबित करना आसान है:

 alert( typeof window.methodThatDoesntExist ); // => undefined alert( typeof window.makeArray ); // => function 

यही है, makeArray('one', 'two'); लिए एक कॉल makeArray('one', 'two'); कॉल करने के बराबर। window.makeArray('one', 'two'); ।

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

फ़ंक्शन नंबर 1 को कॉल करने का नियम: यदि किसी ऑब्जेक्ट को निर्दिष्ट किए बिना सीधे एक फ़ंक्शन कहा जाता है (उदाहरण के लिए, myFunction() ), तो इसका मान वैश्विक ऑब्जेक्ट ( window अगर कोड ब्राउज़र में निष्पादित होता है) होगा।

विधि कॉल

आइए एक साधारण वस्तु बनाएं और makeArray इसकी विधि makeArray । हम शाब्दिक संकेतन का उपयोग कर वस्तु की घोषणा करते हैं, और फिर हम अपनी विधि कहते हैं:

 //   var arrayMaker = { someProperty: '- ', make: makeArray }; //   make() arrayMaker.make('one', 'two'); // => [ arrayMaker, 'one', 'two' ] //  ,    arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ] 

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

 var arrayMaker = { someProperty: '- '; make: function (arg1, arg2) { return [ this, arg1, arg2]; } }; 

फंक्शन रूल # 2: फंक्शन कॉल सिंटैक्स का उपयोग करते हुए एक फ़ंक्शन में, उदाहरण के लिए, obj.myFunction() या obj['myFunction']() , this obj सेट किया जाएगा।

इस सरल को समझने में विफलता, सामान्य रूप से, सिद्धांत अक्सर घटना प्रसंस्करण में त्रुटियों की ओर जाता है:

 <input type="button" value="Button 1" id="btn1" /> <input type="button" value="Button 2" id="btn2" /> <input type="button" value="Button 3" id="btn3" onclick="buttonClicked();" /> <script type="text/javascript"> function buttonClicked(){ var text = (this === window) ? 'window' : this.id; alert( text ); } var button1 = document.getElementById('btn1'); var button2 = document.getElementById('btn2'); button1.onclick = buttonClicked; button2.onclick = function(){ buttonClicked(); }; </script> 

पहले बटन पर क्लिक करने से संदेश "btn1" प्रदर्शित होगा, क्योंकि इस मामले में हम फ़ंक्शन को एक विधि के रूप में कहते हैं, और फ़ंक्शन के अंदर this ऑब्जेक्ट का मूल्य प्राप्त होगा जिसके लिए यह विधि है। दूसरे बटन पर क्लिक करने पर "विंडो" प्रदर्शित होगी, क्योंकि इस मामले में हम सीधे बटन को कॉल करते हैं (यानी obj.buttonClicked() ) की तरह नहीं। ऐसा ही होता है जब हम तत्व टैग में एक ईवेंट हैंडलर असाइन करते हैं, जैसे कि तीसरे बटन के मामले में। तीसरे बटन पर क्लिक करने पर दूसरा के रूप में एक ही संदेश दिखाई देगा।

JQuery जैसे पुस्तकालयों का उपयोग करते समय, आपको इसके बारे में सोचने की ज़रूरत नहीं है। jQuery ईवेंट हैंडलर में this मान को फिर से लिखने का ध्यान रखेगा ताकि this मान ईवेंट को ऊपर उठाने वाला तत्व हो:

 //  jQuery $('#btn1').click( function() { alert( this.id ); // jQuery   ,  'this'   }); 

JQuery this मान को बदलने का प्रबंधन कैसे करता है? नीचे पढ़ें

दो और तरीके: apply() और call()

यह तर्कसंगत है कि जितना अधिक बार आप फ़ंक्शन का उपयोग करते हैं, उतना अधिक बार आपको उन्हें पास करना होगा और उन्हें विभिन्न संदर्भों में कॉल करना होगा। अक्सर this के मूल्य को ओवरराइड करने की आवश्यकता होती है। यदि आपको याद है, जावास्क्रिप्ट में कार्य ऑब्जेक्ट हैं। व्यवहार में, इसका मतलब है कि कार्यों में पूर्वनिर्धारित विधियां हैं। apply() और call() उनमें से दो हैं। वे आपको इसके मूल्य को ओवरराइड करने की अनुमति देते हैं:

 var car = { year: 2008, model: 'Dodge Bailout' }; makeArray.apply( car, [ 'one', 'two' ] ); // => [ car, 'one', 'two' ] makeArray.call( car, 'one', 'two' ); // => [ car, 'one', 'two' ] 

ये दोनों विधियां बहुत समान हैं। पहला पैरामीटर इससे आगे निकल this । उनके बीच मतभेद निम्न तर्कों में हैं: Function.apply() के लिए दिए जाने वाले मानों की एक सरणी लेता है, और Function.call() अलग से तर्क लेता है। व्यवहार में, मेरी राय में, यह apply() लिए अधिक सुविधाजनक है apply() ।

फ़ंक्शन नंबर 3 को कॉल करने का नियम: यदि आप फ़ंक्शन के किसी अन्य ऑब्जेक्ट को कॉपी किए बिना इसके मूल्य को ओवरराइड करना चाहते हैं, तो आप myFunction.apply( obj ) या myFunction.call( obj ) उपयोग कर सकते हैं।

कंस्ट्रक्टर्स

मैं जावास्क्रिप्ट में मूल प्रकार की घोषणा करने पर ध्यान नहीं दूंगा, लेकिन मैं यह याद रखना आवश्यक समझता हूं कि जावास्क्रिप्ट में कोई कक्षाएं नहीं हैं, और किसी भी कस्टम प्रकार को एक निर्माता की आवश्यकता है। इसके अलावा, prototype माध्यम से उपयोगकर्ता-परिभाषित तरीकों की घोषणा करना बेहतर है, जो निर्माण कार्य का एक गुण है। चलो हमारे प्रकार बनाएँ:

 //   function ArrayMaker(arg1, arg2) { this.someProperty = ''; this.theArray = [ this, arg1, arg2 ]; } //   ArrayMaker.prototype = { someMethod: function () { alert(' someMethod'); }, getArray: function () { return this.theArray; } }; var am = new ArrayMaker( 'one', 'two' ); var other = new ArrayMaker( 'first', 'second' ); am.getArray(); // => [ am, 'one', 'two' ] 

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

अन्यथा, कंस्ट्रक्टर के अंदर का कोड सबसे अधिक संभावना कोड की तरह दिखेगा जो आप किसी अन्य भाषा में लिखेंगे। इस मामले में इसका मूल्य नई वस्तु है जिसे आप बना रहे हैं।

फ़ंक्शन नंबर 4 को कॉल करने का नियम: new ऑपरेटर के साथ एक फ़ंक्शन को कॉल करते समय, this मान जावास्क्रिप्ट रनटाइम द्वारा बनाई गई एक नई वस्तु होगी। यदि यह फ़ंक्शन स्पष्ट रूप से किसी भी ऑब्जेक्ट को वापस नहीं करता है, तो यह अंतर्निहित रूप से वापस आ जाएगा।

निष्कर्ष

उम्मीद है कि कॉलिंग फ़ंक्शन के विभिन्न तरीकों के बीच अंतर को समझने से आप अपने जावास्क्रिप्ट कोड में सुधार कर पाएंगे। कभी-कभी this के मूल्य से संबंधित त्रुटियों को पकड़ना आसान नहीं होता है, इसलिए यह अग्रिम में उनकी घटना को रोकने के लिए समझ में आता है।