Передать функцию JavaScript в качестве параметра

как передать функцию в качестве параметра без выполнения функции в" родительской " функции или с помощью eval()? (Поскольку я читал, что это небезопасно.)

у меня есть это:

addContact(entityId, refreshContactList());

это работает, но проблема в том, что refreshContactList срабатывает при вызове функции, а не при ее использовании в функции.

Я мог бы обойти его, используя eval(), но это не лучшая практика, по тому, что я читал. Как я могу передать функцию в качестве параметра в JavaScript?

13 ответов


вам просто нужно удалить скобки:

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

Если вы хотите передать функцию, просто ссылаться на него по имени без скобок:

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 и имеют третий параметр, который является массивом аргументы, вроде таких:

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

Пример 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!'

смотреть на это


передать функцию в качестве параметра, просто уберите скобки!

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

идея заключается в том, что функция очень похожа на переменную. Вместо того чтобы писать!--5-->

function ToBeCalled() { /* something */ }

вы могли бы также написать

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

есть незначительные различия между ними, но в любом случае - оба они являются допустимыми способами определения функции. Теперь, если вы определяете функцию и явно назначаете ее переменной, кажется вполне логичным, что вы можете передать ее как параметр для другой функции, и вам не нужны скобки:

anotherFunction(ToBeCalledVariable);

среди программистов JavaScript есть фраза: "Eval-это зло", поэтому постарайтесь избежать этого любой ценой!

в дополнение к ответу Стива Фентона вы также можете передавать функции напрямую.

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

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

вы также можете использовать 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");

вот именно. Я также искал это решение и пробовал решения, представленные в других ответах, но, наконец, получил его работу из приведенного выше примера.


Я предлагаю поставить параметры в массив, а затем разделить их с помощью


Я отрезал все мои волосы с этим вопросом. Я не мог заставить примеры выше работать, поэтому я закончил так:

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

и это работает как шарм ... по крайней мере, для того, что мне было нужно. Надеюсь, это поможет.


вот еще один подход:

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

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

на самом деле, кажется, немного сложно, нет.

метод GET в качестве параметра:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

Вы можете дать в качестве метода параметр:

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

другие ответы отлично описывают то, что происходит, но один важный "gotcha" - убедиться, что все, что вы проходите, действительно является ссылкой на функцию.

например, если вы проходите через строку вместо функции, вы получите ошибку:

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

посмотреть JsFiddle


некоторое время , когда вам нужно иметь дело с обработчиком событий, поэтому нужно передать событие тоже в качестве аргумента, большая часть современной библиотеки, такой как react, angular, может понадобиться.

мне нужно переопределить функцию OnSubmit (функция из сторонней библиотеки) с некоторой пользовательской проверкой на reactjs, и я передал функцию и событие, как показано ниже

изначально

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

вы также можете использовать JSON для хранения и отправки функций JS.

проверьте следующее:

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



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

это будет печатать '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);
}