将JavaScript函数作为参数传递

Pass a JavaScript function as parameter

如果函数没有在"parent"函数中执行或使用eval(),如何将函数作为参数传递?(因为我读到它不安全。)

我有这个:

1
addContact(entityId, refreshContactList());

它可以工作,但问题是当调用函数时,而不是在函数中使用它时,refreshContactList会激发。

我可以使用eval()来绕过它,但根据我读到的,这不是最佳实践。如何在javascript中传递函数作为参数?


你只需要去掉括号:

1
addContact(entityId, refreshContactList);

然后在不首先执行函数的情况下传递函数。

下面是一个例子:

1
2
3
4
5
6
7
8
9
10
11
function addContact(id, refreshCallback) {
    refreshCallback();
    // You can also pass arguments if you need to
    // refreshCallback(id);
}

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

addContact(1, refreshContactList);


如果要传递函数,只需按名称引用它而不带括号:

1
2
3
4
5
6
7
8
9
function foo(x) {
    alert(x);
}
function bar(func) {
    func("Hello World!");
}

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

但有时您可能希望传递包含参数的函数,但在调用回调之前不要调用它。为此,在调用它时,只需将它包装在一个匿名函数中,如下所示:

1
2
3
4
5
6
7
8
9
function foo(x) {
   alert(x);
}
function bar(func) {
   func();
}

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

如果愿意,还可以使用apply函数,并使用第三个参数作为参数数组,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:

1
2
3
4
5
funct("z", function (x) { return x; });

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

例2:

1
2
3
4
5
6
7
8
9
10
function foodemo(value){
    return 'hello '+value;
}

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

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

看看这个


要传递函数作为参数,只需移除括号!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);

其背后的思想是函数与变量非常相似。而不是写作

1
function ToBeCalled() { /* something */ }

你还是写吧

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

两者之间有一些细微的差别,但无论如何,它们都是定义函数的有效方法。现在,如果您定义了一个函数并显式地将它赋给一个变量,那么您可以将它作为参数传递给另一个函数,而不需要括号:

1
anotherFunction(ToBeCalledVariable);


在javascript程序员中有一句话:"eval是邪恶的",所以要不惜一切代价避免它!

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

1
2
3
4
5
6
7
function addContact(entity, refreshFn) {
    refreshFn();
}

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


我建议将参数放在一个数组中,然后使用.apply()函数将它们分开。所以现在我们可以很容易地传递一个有很多参数的函数,并以一种简单的方式执行它。

1
2
3
4
5
6
7
8
9
10
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


你也可以用eval()来做同样的事情。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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");

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


我为那个问题把头发都剪掉了。我不能让上面的例子起作用,所以我的结尾是:

1
2
3
4
5
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("");

这就像一个魅力…至少是为了我需要的。希望能有帮助。


其他的答案很好地描述了正在发生的事情,但是一个重要的"明白"是要确保你传递的内容确实是一个函数的引用。

例如,如果传递字符串而不是函数,则会得到一个错误:

1
2
3
4
5
6
7
8
9
10
11
function function1(my_function_parameter){
    my_function_parameter();  
}

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

function1(function2); //This will work

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

参见J小提琴


其实,好像有点复杂,不是。

获取方法作为参数:

1
2
3
4
5
 function JS_method(_callBack) {

           _callBack("called");  

        }

您可以给出一个参数方法:

1
2
3
4
    JS_method(function (d) {
           //Finally this will work.
           alert(d)
    });


这是另一种方法:

1
2
3
4
5
6
function a(first,second)    
{        
return (second)(first);          
}    

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


有时,当您需要处理事件处理程序时,也需要将事件作为参数传递,大多数现代库(如react、angular)可能需要这样做。

我需要用一些对reactjs的自定义验证来覆盖onsubmit函数(来自第三方库的函数),我传递了函数和事件,如下所示

原来

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

生成了一个新的函数upload,并将传递的onSubmit和event作为参数调用

1
2
3
4
5
6
<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函数。

检查以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myJSON =
{
   "myFunc1" : function (){
        alert("a");
    },
   "myFunc2" : function (functionParameter){
        functionParameter();
    }
}



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

这将打印"A"。

以下内容与上述内容具有同等效力:

1
2
3
4
5
6
7
8
9
10
11
var myFunc1 = function (){
    alert('a');
}

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

function main(){
    myFunc2(myFunc1);
}

其效果与以下相同:

1
2
3
4
5
6
7
8
9
10
11
12
function myFunc1(){
    alert('a');
}


function myFunc2 (functionParameter){
    functionParameter();
}

function main(){
    myFunc2(myFunc1);
}

以及使用类作为对象原型的对象范式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Class(){
    this.myFunc1 =  function(msg){
        alert(msg);
    }

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


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