将 JavaScript 函数作为参数传递

Posted 2023-02-15

【中文标题】将 JavaScript 函数作为参数传递

【英文标题】：Pass a JavaScript function as parameter

【发布时间】：2012-10-28 11:36:36

【问题描述】：

如何在没有在“父”函数中执行的函数或使用eval() 的情况下将函数作为参数传递？ （因为我读过它是不安全的。）

我有这个：

addContact(entityId, refreshContactList());

它可以工作，但问题是refreshContactList 在调用函数时触发，而不是在函数中使用它时触发。

我可以使用eval() 解决它，但根据我所读到的内容，这不是最佳做法。如何在 javascript 中将函数作为参数传递？

【参考方案1】：

你只需要去掉括号：

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

【讨论】：

基于问题，回调不接受参数，这就是我将它们排除在示例之外的原因。我会添加评论。

@Veverke 它看起来像这样...addContact(1, function(id) console.log(id); );

@Steve Fenton：看了你的回复后，我问自己为什么要问... :-)

ECMAScript 中的类语法不会有= 符号...class myFuncs 而不是class myFuncs = 。您还需要在支持类语法的环境中运行（并非所有浏览器都支持它）。如果您仍在苦苦挣扎，它可能更适合一个全新的问题，因为您的问题不在于传递函数 - 它是通用 ES 语法。

如何在另一个上调用这个App.ThisFunction("show") 函数？例如：myotherfunction("arg1",App.ThisFunction("show")); 和 myotherfunction 是 ---> myotherfunction('arg1',func) func; HOW??????????????????????

【参考方案2】：

要将函数作为参数传递，只需删除括号！

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

【讨论】：

typeof paramFunc == "function" 就足够了，因为如果它不可调用，那么你可以忽略它。

【参考方案3】：

示例 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!'

look at this

【讨论】：

在第一个例子中你应该添加 return 关键字，像这样： function funct(a, foo) return foo(a) // 这将返回一个 否则你会得到 undefined

【参考方案4】：

在 JavaScript 程序员中有一句话：“Eval is Evil”，所以要不惜一切代价避免它！

除了史蒂夫芬顿的回答，你也可以直接传函数。

function addContact(entity, refreshFn) 
    refreshFn();


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

【参考方案5】：

您也可以使用 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);

还有一个使用Class作为对象原型的对象范式：

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

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



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

【讨论】：

您的***代码示例不是 JSON。这是一个标准的 JavaScript 对象。您也不能在 JSON 中发送/接收函数。

【参考方案6】：

这是另一种方法：

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

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

【参考方案7】：

您也可以使用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");

就是这样。我也在寻找这个解决方案并尝试了其他答案中提供的解决方案，但最终从上面的例子中得到了它。

【讨论】：

在生产代码中使用 eval() 之前，请先研究一下安全隐患。许多开发人员只是避免它，包括我自己。 eval === evil 是我的助记符。

【参考方案8】：

如果你想传递一个函数，只需按名称引用它，不带括号：

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

如果您愿意，也可以使用apply 函数并使用第三个参数，即参数数组，如下所示：

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

【讨论】：

这应该排名更高，因为他还解决了如何传递带参数的函数

我要补充一点的是，这个特性本身——能够将 JavaScript 函数作为参数或变量等传递——是使 JavaScript 如此强大的特性非常适合编写代码。

我非常感谢 Javascript 提供了这个功能，也感谢你 @dallin 让我知道它的存在。

对于“将其包裹在匿名函数中”的示例，如果不明显，匿名函数返回函数本身（带参数），并在到达 func( ）。我花了一段时间才弄清楚，所以我认为它可能对其他人有所帮助。

这是所有答案中最清晰最令人满意的。

【参考方案9】：

其实好像有点复杂，其实不然。

get方法作为参数：

 function JS_method(_callBack)  

           _callBack("called");  

        

你可以给作为参数的方法：

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

【讨论】：

请解释一下你的答案。

【参考方案10】：

其他答案很好地描述了正在发生的事情，但一个重要的“陷阱”是确保您通过的任何内容确实是对函数的引用。

例如，如果你通过一个字符串而不是一个函数，你会得到一个错误：

function function1(my_function_parameter)
    my_function_parameter();   


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


function1(function2); //This will work

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

见JsFiddle

【参考方案11】：

我建议将参数放在一个数组中，然后使用.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

【参考方案12】：

因为这个问题，我把头发都剪掉了。我无法让上面的例子工作，所以我结束了：

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

这就像一个魅力......至少对于我需要的东西。希望对大家有所帮助。

【参考方案13】：

有时你需要处理事件处理程序，因此也需要将事件作为参数传递，大多数现代库如 react、angular 可能都需要这个。

我需要通过对 reactjs 的一些自定义验证来覆盖 OnSubmit 函数（来自第三方库的函数），并且我通过了如下所示的函数和事件

原来

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

【参考方案14】：

通过使用 ES6：

const invoke = (callback) => 
  callback()



invoke(()=>
  console.log("Hello World");
)

【参考方案15】：

如果您可以将整个函数作为字符串传递，此代码可能会对您有所帮助。

convertToFunc( "runThis('Micheal')" )

function convertToFunc( str)     
  new Function( str )()
  
function runThis( name )
    console.log("Hello", name) // prints Hello Micheal