将JavaScript函数作为参数传递

如何在不执行“父”函数或使用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);

@stevefenton，考虑使用h2ooooooo评论更新您的答案，这将非常有用。

–摩根·王尔德
2012年11月8日9:37

基于该问题，回调不接受参数，这就是为什么我在示例中省略了它们的原因。我将对此添加评论。

– Fenton
2012年11月8日，9：42

@Veverke看起来像这样... addContact（1，function（id）{console.log（id）;}）;

– Fenton
2014年11月24日10:46

@Steve Fenton：在阅读您的回复后，我问自己为什么问... :-)

– Veverke
2014年11月25日15:52

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

– Fenton
16年6月21日在21:08

#2 楼

如果要传递函数，只需按名称引用而不带括号即可：

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

这应该排名更高，因为他还谈到了如何通过参数传递函数

– deltanine
2014年8月27日下午3:16

我要补充的一点是，仅此功能-能够将JavaScript函数作为参数或变量等传递-是使JavaScript如此强大且非常适合编写代码的功能。

–TheHansinator
2015年12月9日在22:16

非常感谢Javascript提供此功能，并感谢您@dallin告诉我它的存在。

– Dipendu Paul
16-4-7在11:28

对于“将其包装在匿名函数中”示例，如果情况不太明显，则匿名函数将返回函数本身（带有参数），并在到达func（）中的括号时调用该函数。这花了我一段时间才能弄清楚，所以我认为这可能会对其他人有所帮助。

–hubpixel
19年4月26日在1:07

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

– Leandro Gamarra
11月15日18:20

#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!'

看看这个

在第一个示例中，您应该添加return关键字，如下所示：function funct（a，foo）{return foo（a）//这将返回}，否则将无法定义

– Artem Fedotov
5月20日22:08

#4 楼

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

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”就足够了，因为如果无法调用，则可以忽略它。

–吉米·诺特（Jimmy Knoot）
2015年3月10日14:26

#5 楼

JavaScript程序员中有一句话：“评估就是邪恶”，因此，请不惜一切代价避免使用它。

除了Steve Fenton的回答，您还可以直接传递函数。

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

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

#6 楼

我把那个问题剪掉了。我无法使上面的示例正常工作，所以我以：

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

结尾，这至少像我所需要的那样运转。希望对您有所帮助。

#7 楼

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

#8 楼

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

就这样。我也在寻找此解决方案，并尝试了其他答案中提供的解决方案，但最终从上述示例中使它起作用。

#9 楼

这是另一种方法：

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

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

#10 楼

其实似乎有点复杂，不是。

获取方法作为参数：

 function JS_method(_callBack) { 

           _callBack("called");  

        }

您可以给出方法作为参数：

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

请解释您的答案。

–MillaresRoo
14-10-14在10:16

#11 楼

其他答案在描述正在发生的事情方面做得很好，但是一个重要的“陷阱”是要确保所传递的内容确实是对函数的引用。

例如，如果通过字符串而不是函数，则会出现错误：

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

请参见JsFiddle

#12 楼

有时候，当您需要处理事件处理程序，因此也需要将事件作为参数传递时，大多数现代库（例如react，angular）可能都需要这样做。

我需要重写OnSubmit函数（第三方库），并在reactjs上进行了一些自定义验证，我通过了如下所示的函数和事件

ORIGINALLY

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

#13 楼

您也可以使用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发送/接收函数。

–马修·莱顿（Matthew Layton）
2014年1月31日12:03

编程黑洞网