Passa una funzione JavaScript come parametro

Come faccio a passare una funzione come parametro senza che la funzione venga eseguita nella funzione “genitore” o usando eval() ? (Da quando ho letto che è insicuro.)

Ho questo:

 addContact(entityId, refreshContactList()); 

Funziona, ma il problema è che refreshContactList si refreshContactList quando viene chiamata la funzione, piuttosto che quando viene utilizzata nella funzione.

Potrei eval() usando eval() , ma non è la migliore pratica, secondo quello che ho letto. Come posso passare una funzione come parametro in JavaScript?

Hai solo bisogno di rimuovere la parentesi:

 addContact(entityId, refreshContactList); 

Quindi passa la funzione senza prima eseguirla.

Ecco un esempio:

 function addContact(id, refreshCallback) { refreshCallback(); // You can also pass arguments if you need to // refreshCallback(id); } function refreshContactList() { alert('Hello World'); } addContact(1, refreshContactList); 

Se si desidera passare una funzione, basta fare riferimento per nome senza le parentesi:

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

Ma a volte potresti voler passare una funzione con argomenti inclusi , ma non chiamarla finché non viene richiamata la richiamata. Per fare questo, quando lo si chiama, basta avvolgerlo in una funzione anonima, come questa:

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

Se preferisci, puoi anche usare la funzione apply e avere un terzo parametro che è una matrice di argomenti, come ad esempio:

 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"]); 

Esempio 1:

 funct("z", function (x) { return x; }); function funct(a, foo){ foo(a) // this will return a } 

Esempio 2:

 function foodemo(value){ return 'hello '+value; } function funct(a, foo){ alert(foo(a)); } //call funct funct('world!',foodemo); //=> 'hello world!' 

guarda questo

Per passare la funzione come parametro, è sufficiente rimuovere le parentesi!

 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); 

L’idea alla base di questo è che una funzione è abbastanza simile a una variabile. Invece di scrivere

 function ToBeCalled() { /* something */ } 

potresti anche scrivere

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

Ci sono piccole differenze tra i due, ma comunque – entrambi sono modi validi per definire una funzione. Ora, se si definisce una funzione e la si assegna esplicitamente a una variabile, sembra abbastanza logico, che è ansible passarla come parametro a un’altra funzione e non sono necessarie le parentesi:

 anotherFunction(ToBeCalledVariable); 

C’è una frase tra i programmatori JavaScript: “Eval is Evil” quindi cerca di evitarlo a tutti i costi!

Oltre alla risposta di Steve Fenton, puoi anche passare direttamente le funzioni.

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

Puoi anche usare eval() per fare la stessa cosa.

 //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"); 

Questo è tutto. Stavo anche cercando questa soluzione e ho provato le soluzioni fornite in altre risposte, ma alla fine l’ho provata dall’esempio sopra.

Suggerisco di inserire i parametri in un array e quindi dividerli utilizzando la funzione .apply() . Così ora possiamo facilmente passare una funzione con molti parametri ed eseguirla in un modo semplice.

 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 

Mi sono tagliato tutti i capelli con quel problema. Non riuscivo a rendere gli esempi sopra funzionanti, quindi ho finito come:

 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')"); 

E questo funziona come un incantesimo … per quello di cui avevo bisogno, almeno. Spero che potrebbe aiutare alcuni.

Ecco un altro approccio:

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

In effetti, sembra un po ‘complicato, non lo è.

ottieni il metodo come parametro:

  function JS_method(_callBack) { _callBack("called"); } 

Puoi dare come metodo parametro:

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

Le altre risposte fanno un ottimo lavoro descrivendo cosa sta succedendo, ma un importante “trucco” è assicurarsi che tutto ciò che si passa sia effettivamente un riferimento a una funzione.

Ad esempio, se passi una stringa invece di una funzione, riceverai un errore:

 function function1(my_function_parameter){ my_function_parameter(); } function function2(){ alert('Hello world'); } function1(function2); //This will work function1("function2"); //This breaks! 

Vedi JsFiddle

Un po ‘di tempo in cui è necessario gestire il gestore di eventi, quindi è necessario passare anche l’evento come argomento, la maggior parte della libreria moderna può reactjs, l’angular potrebbe averne bisogno.

Ho bisogno di sovrascrivere la funzione OnSubmit (funzione dalla libreria di terze parti) con alcune convalide personalizzate su reactjs e ho passato la funzione e l’evento sia come sotto

ORIGINARIAMENTE

   

EFFETTUATO UN NUOVO FUNZIONAMENTO di upload e chiamato passato su onSubmit ed evento come argomenti

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

È anche ansible utilizzare un JSON per memorizzare e inviare funzioni JS.

Controlla quanto segue:

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

Questo stamperà ‘a’.

Quanto segue ha lo stesso effetto con quanto sopra:

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

Che ha anche lo stesso effetto con il seguente:

 function myFunc1(){ alert('a'); } function myFunc2 (functionParameter){ functionParameter(); } function main(){ myFunc2(myFunc1); } 

E un paradigma di oggetti che utilizza Class come prototipo di object:

 function Class(){ this.myFunc1 = function(msg){ alert(msg); } this.myFunc2 = function(callBackParameter){ callBackParameter('message'); } } function main(){ var myClass = new Class(); myClass.myFunc2(myClass.myFunc1); }