पैरामीटर के रूप में एक जावास्क्रिप्ट फ़ंक्शन पास करें


665

मैं "पैरेंट" फ़ंक्शन में निष्पादित या उपयोग किए बिना फ़ंक्शन के पैरामीटर के रूप में फ़ंक्शन कैसे पास करूं eval()? (जब से मैंने पढ़ा है कि यह असुरक्षित है।)

मेरे पास यह है:

addContact(entityId, refreshContactList());

यह काम करता है, लेकिन समस्या यह है कि refreshContactListजब फ़ंक्शन का उपयोग किया जाता है, तो फ़ंक्शन के बजाय कॉल किया जाता है।

मैं इसका उपयोग करके इसे प्राप्त कर सकता हूं eval(), लेकिन मैंने जो पढ़ा है, उसके अनुसार यह सर्वोत्तम अभ्यास नहीं है। मैं जावास्क्रिप्ट में एक पैरामीटर के रूप में एक फ़ंक्शन कैसे पारित कर सकता हूं?

जवाबों:


930

आपको केवल कोष्ठक को हटाने की आवश्यकता है:

addContact(entityId, refreshContactList);

यह तब फ़ंक्शन को पहले निष्पादित किए बिना पास करता है।

यहाँ एक उदाहरण है:

function addContact(id, refreshCallback) {
    refreshCallback();
    // You can also pass arguments if you need to
    // refreshCallback(id);
}

function refreshContactList() {
    alert('Hello World');
}

addContact(1, refreshContactList);

6
@stevefenton, h2ooooooo टिप्पणी के साथ अपने उत्तर को अपडेट करने पर विचार करें, यह बहुत उपयोगी होगा।
मॉर्गन वाइल्ड

5
प्रश्न के आधार पर, कॉलबैक मापदंडों को स्वीकार नहीं करता है, यही वजह है कि मैंने उन्हें उदाहरण से बाहर कर दिया है। मैं इसके बारे में एक टिप्पणी जोड़ूंगा।
फेंटन

4
@Veverke ऐसा लगेगा ...addContact(1, function(id) { console.log(id); });
Fenton

4
@ शेव फेंटन: आपके जवाब को पढ़ने के बाद मैंने खुद से पूछा कि मैंने ऐसा क्यों पूछा ... :-)
वीवीके

1
ECMAScript में क्लास सिंटैक्स में =साइन नहीं होता ... class myFuncs {बल्कि class myFuncs = {। आपको ऐसे वातावरण में भी चलने की आवश्यकता होगी जो वर्ग सिंटैक्स का समर्थन करता है (सभी ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं)। यदि आप अभी भी संघर्ष कर रहे हैं, तो यह एक पूरे नए प्रश्न के लिए बेहतर हो सकता है क्योंकि आपकी समस्या पासिंग फ़ंक्शंस के बारे में नहीं है - यह सामान्य ईएस सिंटैक्स है।
फेंटन

337

यदि आप कोई फ़ंक्शन पास करना चाहते हैं, तो इसे बिना कोष्ठकों के नाम से संदर्भित करें:

function foo(x) {
    alert(x);
}
function bar(func) {
    func("Hello World!");
}

//alerts "Hello World!"
bar(foo);

लेकिन कभी-कभी आप शामिल तर्कों के साथ एक फ़ंक्शन पास करना चाहते हैं , लेकिन कॉलबैक लागू होने तक इसे कॉल नहीं किया है। ऐसा करने के लिए, इसे कॉल करते समय, इसे एक अनाम फ़ंक्शन में लपेटें, जैसे:

function foo(x) {
   alert(x);
}
function bar(func) {
   func();
}

//alerts "Hello World!" (from within bar AFTER being passed)
bar(function(){ foo("Hello World!") });

यदि आप चाहें, तो आप लागू फ़ंक्शन का भी उपयोग कर सकते हैं और एक तीसरा पैरामीटर है जो तर्कों का एक सरणी है, जैसे:

function eat(food1, food2)
{
    alert("I like to eat " + food1 + " and " + food2 );
}
function myFunc(callback, args)
{
    //do stuff
    //...
    //execute callback when finished
    callback.apply(this, args);
}

//alerts "I like to eat pickles and peanut butter"
myFunc(eat, ["pickles", "peanut butter"]); 

70
इसे उच्च स्थान दिया जाना चाहिए क्योंकि वह यह भी बताता है कि तर्कों के साथ एक समारोह कैसे पारित किया जाए
delananine

3
और कुछ मैं इसमें जोड़ दूंगा कि यह सुविधा अकेले - जावास्क्रिप्ट कार्यों को तर्क या चर के रूप में पारित करने में सक्षम है या जैसे - वह विशेषता है जो जावास्क्रिप्ट को कोड में इतना शक्तिशाली और इतना महान बनाती है।
हंसीनाटर

@ Compynerd255 मैं सहमत हूं, यह और वस्तु शाब्दिक रूप से जल्दी से बनाने की क्षमता मेरे जावास्क्रिप्ट के दो पसंदीदा पहलू हैं। मुझे हमेशा उन भाषाओं में ऑब्जेक्ट शब्द याद आते हैं जो उनके पास नहीं हैं।
dallin

3
मैं इस सुविधा को प्रदान करने के लिए जावास्क्रिप्ट के लिए बहुत आभारी हूं और आपको @dallin को यह बताने के लिए कि यह मौजूद है।
दीपेन्दु पॉल

"इसे एक अनाम फ़ंक्शन में लपेटें" उदाहरण के लिए, यदि यह स्पष्ट नहीं है, तो अनाम फ़ंक्शन फ़ंक्शन को स्वयं (मापदंडों के साथ) लौटाता है और जब इसे func () में कोष्ठक तक पहुंचता है तो इसे लागू किया जाता है। मुझे यह पता लगाने में थोड़ा समय लगा, इसलिए मैंने सोचा कि यह दूसरों की मदद कर सकता है।
हबप्रिक्सल

51

उदाहरण 1:

funct("z", function (x) { return x; });

function funct(a, foo){
    foo(a) // this will return a
}

उदाहरण 2:

function foodemo(value){
    return 'hello '+value;
}

function funct(a, foo){
    alert(foo(a));
}

//call funct    
funct('world!',foodemo); //=> 'hello world!'

इसे देखो


पहले उदाहरण में आपको रिटर्न कीवर्ड जोड़ना चाहिए, इस तरह: फंक्शन फ़ंक्शनल (ए, फू) {रिटर्न फ़ू (ए) // यह एक} वापस आ जाएगा अन्यथा आप अपरिभाषित हो जाएंगे
आर्टेम फेडोटोव

34

फ़ंक्शन को पैरामीटर के रूप में पारित करने के लिए, बस कोष्ठक हटा दें!

function ToBeCalled(){
  alert("I was called");
}

function iNeedParameter( paramFunc) {
   //it is a good idea to check if the parameter is actually not null
   //and that it is a function
   if (paramFunc && (typeof paramFunc == "function")) {
      paramFunc();   
   }
}

//this calls iNeedParameter and sends the other function to it
iNeedParameter(ToBeCalled); 

इसके पीछे विचार यह है कि एक फ़ंक्शन एक चर के समान है। लिखने के बजाय

function ToBeCalled() { /* something */ }

आप भी लिख सकते हैं

var ToBeCalledVariable = function () { /* something */ }

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

anotherFunction(ToBeCalledVariable);

2
बस typeof paramFunc == "function"पर्याप्त है, यदि यह कॉल करने योग्य नहीं है, तो आप इसे अनदेखा कर सकते हैं।
जिमी नॉट

16

जावास्क्रिप्ट प्रोग्रामर्स के बीच एक वाक्यांश है: "एवल इविल" है इसलिए हर कीमत पर इससे बचने की कोशिश करें!

स्टीव फेंटन के जवाब के अलावा, आप सीधे फ़ंक्शन भी पास कर सकते हैं।

function addContact(entity, refreshFn) {
    refreshFn();
}

function callAddContact() {
    addContact("entity", function() { DoThis(); });
}

8

मैंने उस मुद्दे के साथ अपने सारे बाल काट दिए। मैं ऊपर दिए गए उदाहरणों को काम नहीं कर सका, इसलिए मैं समाप्त हो गया जैसे:

function foo(blabla){
    var func = new Function(blabla);
    func();
}
// to call it, I just pass the js function I wanted as a string in the new one...
foo("alert('test')");

और यह एक आकर्षण की तरह काम कर रहा है ... जो मुझे कम से कम चाहिए था। आशा है कि यह कुछ मदद कर सकता है।


6

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

function addContact(parameters, refreshCallback) {
    refreshCallback.apply(this, parameters);
}

function refreshContactList(int, int, string) {
    alert(int + int);
    console.log(string);
}

addContact([1,2,"str"], refreshContactList); //parameters should be putted in an array

5

आप eval()एक ही काम करने के लिए भी उपयोग कर सकते हैं ।

//A function to call
function needToBeCalled(p1, p2)
{
    alert(p1+"="+p2);
}

//A function where needToBeCalled passed as an argument with necessary params
//Here params is comma separated string
function callAnotherFunction(aFunction, params)
{
    eval(aFunction + "("+params+")");
}

//A function Call
callAnotherFunction("needToBeCalled", "10,20");

बस। मैं भी इस समाधान की तलाश कर रहा था और अन्य उत्तरों में प्रदान किए गए समाधानों की कोशिश कर रहा था लेकिन आखिरकार इसे ऊपर के उदाहरण से काम मिल गया।


2

यहाँ यह एक और दृष्टिकोण है:

function a(first,second)    
{        
return (second)(first);           
}     

a('Hello',function(e){alert(e+ ' world!');}); //=> Hello world     

2

वास्तव में, थोड़ा जटिल जैसा लगता है, है नहीं।

एक पैरामीटर के रूप में विधि प्राप्त करें:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

आप एक पैरामीटर विधि के रूप में दे सकते हैं:

    JS_method(function (d) {
           //Finally this will work.
           alert(d)
    });

1
कृपया, अपना उत्तर स्पष्ट करें।
मिलारेसुआर

2

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

उदाहरण के लिए, यदि आप एक फ़ंक्शन के बजाय एक स्ट्रिंग से गुजरते हैं, तो आपको एक त्रुटि मिलेगी:

function function1(my_function_parameter){
    my_function_parameter();   
}

function function2(){
 alert('Hello world');   
}

function1(function2); //This will work

function1("function2"); //This breaks!

JsFiddle देखें


0

कुछ समय जब आपको इवेंट हैंडलर से निपटने की आवश्यकता होती है, तो इवेंट को एक तर्क के रूप में भी पास करने की आवश्यकता होती है, अधिकांश आधुनिक लाइब्रेरी जैसे प्रतिक्रिया, कोणीय को इसकी आवश्यकता हो सकती है।

मुझे रिएक्शनज पर कुछ कस्टम सत्यापन के साथ ऑनसुबमिट फंक्शन (थर्ड पार्टी लाइब्रेरी से फ़ंक्शन) को ओवरराइड करने की आवश्यकता है और मैंने नीचे दिए गए फंक्शन और इवेंट को पास किया

मौलिक रूप से

    <button className="img-submit" type="button"  onClick=
 {onSubmit}>Upload Image</button>

एक नया समारोह बना uploadदिया onSubmitऔर तर्कों के रूप में पारित और घटना को बुलाया

<button className="img-submit" type="button"  onClick={this.upload.bind(this,event,onSubmit)}>Upload Image</button>

upload(event,fn){
  //custom codes are done here
  fn(event);
}

-3

जेएस कार्यों को स्टोर करने और भेजने के लिए आप एक JSON का उपयोग कर सकते हैं।

निम्नलिखित जांचें:

var myJSON = 
{
    "myFunc1" : function (){
        alert("a");
    }, 
    "myFunc2" : function (functionParameter){
        functionParameter();
    }
}



function main(){
    myJSON.myFunc2(myJSON.myFunc1);
}

यह will a ’प्रिंट करेगा।

निम्नलिखित का उपरोक्त के साथ समान प्रभाव है:

var myFunc1 = function (){
    alert('a');
}

var myFunc2 = function (functionParameter){
    functionParameter();
}

function main(){
    myFunc2(myFunc1);
}

जिसका निम्न के साथ भी समान प्रभाव है:

function myFunc1(){
    alert('a');
}


function myFunc2 (functionParameter){
    functionParameter();
}

function main(){
    myFunc2(myFunc1);
}

और ऑब्जेक्ट प्रोटोटाइप के रूप में कक्षा का उपयोग करते हुए एक वस्तु प्रतिमान:

function Class(){
    this.myFunc1 =  function(msg){
        alert(msg);
    }

    this.myFunc2 = function(callBackParameter){
        callBackParameter('message');
    }
}


function main(){    
    var myClass = new Class();  
    myClass.myFunc2(myClass.myFunc1);
}

9
आपका शीर्ष कोड उदाहरण JSON नहीं है। यह एक मानक जावास्क्रिप्ट ऑब्जेक्ट है। आप JSON में फ़ंक्शन भी भेज / प्राप्त नहीं कर सकते।
मैथ्यू लेटन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.