作为参数传递JavaScript函数

Question

如何将函数作为参数传递，但不执行“父”函数或使用eval()？（因为我读过它是不安全的。）

我有这个：

addContact(entityId, refreshContactList());

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

我可以使用eval()来解决这个问题，但根据我所读的，这并不是最佳实践。我怎样才能在JavaScript中将一个函数作为参数传递？

- imperium2335

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

- Fenton

---

根据问题，回调函数不接受参数，这就是为什么我在示例中省略了它们。我会添加一条注释说明。 - Fenton

如果传递一个匿名函数而不是预定义的函数，会是什么样子？ - Veverke

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

在ECMAScript中，类语法不会有一个=符号... class myFuncs {而不是class myFuncs = {。您还需要在支持类语法的环境中运行（并非所有浏览器都支持它）。如果您仍然遇到困难，最好提出一个全新的问题，因为您的问题不是关于传递函数 - 而是关于一般的ES语法。 - Fenton

如何在另一个函数中调用 App.ThisFunction("show") 函数？例如： myotherfunction("arg1",App.ThisFunction("show"));，而 myotherfunction 是 --->myotherfunction('arg1',func){ func; }怎么做？ - Mostafa

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

- dallin

---

他还讲解了如何传递带有参数的函数，因此这篇文章应该排名更靠前。 - deltanine

还有一件事我要补充的是，这个特性——能够将JavaScript函数作为参数或变量传递等等——就是*使JavaScript如此强大和编码如此出色的特性。 - TheHans255

@Compynerd255 我同意，这和快速创建对象字面量的能力是我最喜欢的 JavaScript 特性之一。在没有对象字面量的语言中，我总是会想念它们。 - dallin

针对“将其包装在匿名函数中”的例子，如果不明显的话，匿名函数返回函数本身（带参数），并在到达func()括号时被调用。我花了一段时间才弄明白，所以我想这可能对其他人有所帮助。 - hubpixel

@dallin 在你的第一个例子中，'func' 参数的作用是什么？如果你能描述一下代码中到底发生了什么，会更好，因为这种方法似乎很不寻常，我没有看到任何内置函数像 'func('Hello World')' 这样的用法。提前谢谢！ - undefined

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

看这里

- Gadde

---

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

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

- naivists

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Jimmy Knoot

Answer 5

在JavaScript程序员中有这样一句话：“Eval is Evil”，所以尽可能避免使用它！

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

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

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

- Matthew Layton

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

这对我至少是非常好用的......希望它能帮到一些人。

- Fenix Aoras

Answer 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

- Naramsim

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

就是这样。我也在寻找这个解决方案，尝试了其他答案中提供的解决方案，但最终从上面的示例中使其工作。

- Smile

---

在生产代码中使用eval()之前，请研究其安全性影响。许多开发人员都会避免使用它，包括我自己。eval === evil是我的记忆口诀。 - davidjmcclelland

Answer 9

其他答案已经很好地描述了发生了什么，但一个重要的“坑点”是确保您通过的内容确实是对函数的引用。

例如，如果您传递的是字符串而不是函数，则会出现错误：

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

请查看JsFiddle。

- Victor

Answer 10

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

将get方法作为参数传递：

 function JS_method(_callBack) { 

           _callBack("called");  

        }

您可以将方法作为参数传递：

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

- Biletbak.com

---

请解释你的答案。 - MillaresRoo