Pase una función de JavaScript como parámetro

¿Cómo paso una función como parámetro sin que la función se ejecute en la función "principal" o se use eval()? (Desde que leí que es inseguro).

Tengo esto:

addContact(entityId, refreshContactList());

Funciona, pero el problema es que se refreshContactListdispara cuando se llama a la función, en lugar de cuando se usa en la función.

Podría eval()evitarlo usando , pero no es la mejor práctica, según lo que he leído. ¿Cómo puedo pasar una función como parámetro en JavaScript?

Solo necesita eliminar el paréntesis:

addContact(entityId, refreshContactList);

Esto luego pasa la función sin ejecutarla primero.

Aquí hay un ejemplo:

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

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

addContact(1, refreshContactList);

Si desea pasar una función, simplemente haga referencia a ella por su nombre sin los paréntesis:

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

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

Pero a veces es posible que desee pasar una función con argumentos incluidos , pero que no se llame hasta que se invoque la devolución de llamada. Para hacer esto, cuando lo llame, simplemente envuélvalo en una función anónima, como esta:

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

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

Si lo prefiere, también puede usar la función de aplicación y tener un tercer parámetro que es una matriz de argumentos, como los siguientes:

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

Ejemplo 1:

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

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

Ejemplo 2

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

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

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

mira esto

Para pasar la función como parámetro, simplemente elimine los corchetes.

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

La idea detrás de esto es que una función es bastante similar a una variable. En lugar de escribir

function ToBeCalled() { /* something */ }

bien podrías escribir

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

Hay diferencias menores entre los dos, pero de todos modos, ambos son formas válidas de definir una función. Ahora, si define una función y la asigna explícitamente a una variable, parece bastante lógico que pueda pasarla como parámetro a otra función y no necesite corchetes:

anotherFunction(ToBeCalledVariable);

Hay una frase entre los programadores de JavaScript: "Eval is Evil", ¡así que trata de evitarlo a toda costa!

Además de la respuesta de Steve Fenton, también puede pasar funciones directamente.

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

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

Me corté todo el cabello con ese problema. No pude hacer que los ejemplos anteriores funcionaran, así que terminé como:

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

Y eso funciona a las mil maravillas ... al menos para lo que necesitaba. Espero que pueda ayudar a algunos.

Sugiero poner los parámetros en una matriz y luego dividirlos usando la .apply()función. Así que ahora podemos pasar fácilmente una función con muchos parámetros y ejecutarla de una manera simple.

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

También puedes usar eval()para hacer lo mismo.

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

Eso es. También estaba buscando esta solución y probé soluciones proporcionadas en otras respuestas, pero finalmente conseguí que funcionara con el ejemplo anterior.

Aquí hay otro enfoque:

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

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

De hecho, parece un poco complicado, no lo es.

obtener método como parámetro:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

Puedes dar como método de parámetro:

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

Las otras respuestas hacen un excelente trabajo al describir lo que está sucediendo, pero un "problema" importante es asegurarse de que lo que sea que pase sea una referencia a una función.

Por ejemplo, si pasa a través de una cadena en lugar de una función, obtendrá un error:

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

Ver JsFiddle

En algún momento, cuando necesite lidiar con el controlador de eventos, también debe pasar el evento como argumento, la mayoría de la biblioteca moderna, como reaccionar, angular, podría necesitar esto.

Necesito anular la función OnSubmit (función de la biblioteca de terceros) con alguna validación personalizada en reactjs y pasé la función y el evento tanto como a continuación

ORIGINALMENTE

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

HECHO UNA NUEVA FUNCIÓN uploady llamado pasado onSubmity evento como argumentos

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

También puede usar un JSON para almacenar y enviar funciones JS.

Verifique lo siguiente:

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



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

Esto imprimirá 'a'.

Lo siguiente tiene el mismo efecto con lo anterior:

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

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

function main(){
    myFunc2(myFunc1);
}

Lo que también tiene el mismo efecto con lo siguiente:

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


function myFunc2 (functionParameter){
    functionParameter();
}

function main(){
    myFunc2(myFunc1);
}

Y un paradigma de objeto que usa Class como objeto prototipo:

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

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


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