ChatGPT解决这个技术问题 Extra ChatGPT

将 JavaScript 函数作为参数传递

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

我有这个:

addContact(entityId, refreshContactList());

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

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


E
Erman Kadir Kahraman

您只需要删除括号:

addContact(entityId, refreshContactList);

这然后传递函数而不首先执行它。

这是一个例子:

函数 addContact(id, refreshCallback) { refreshCallback(); // 如果需要,您也可以传递参数 // refreshCallback(id); } 函数 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; } 如何??????????????????????
E
Erman Kadir Kahraman

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

函数 foo(x) { 警报(x); } function bar(func) { func("Hello World!"); } //警报“Hello World!”酒吧(富);

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

函数 foo(x) { 警报(x); } 功能栏(功能) { 功能(); } //警报“Hello World!” (从 bar 内传递后) bar(function(){ foo("Hello World!") });

如果您愿意,也可以使用 apply 函数并使用第三个参数,它是一个参数数组,如下所示:

function eat(food1, food2) { alert("我喜欢吃" + food1 + " and " + food2 ); } function myFunc(callback, args) { //做一些事情 //... //完成后执行回调 callback.apply(this, args); } //alerts "我喜欢吃泡菜和花生酱" myFunc(eat, ["pickles", "peanut butter"]);


这应该排名更高,因为他还解决了如何传递带参数的函数
我要补充一点的是,这个特性本身——能够将 JavaScript 函数作为参数或变量等传递——就是使 JavaScript 如此强大且非常适合编写代码的特性。
我非常感谢 Javascript 提供了这个功能,也感谢你 @dallin 让我知道它的存在。
对于“将其包装在匿名函数中”的示例,如果不明显,匿名函数会返回函数本身(带参数),并在到达 func() 中的括号时调用它。这花了我一段时间才弄清楚,所以我认为它可能对其他人有所帮助。
这是所有答案中最清晰、最令人满意的。
C
Community

示例 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) // 这将返回 a } 否则您将得到 undefined
C
Colonel Panic

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

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" 就足够了,因为如果它不可调用,那么您可以忽略它。
M
Matthew Layton

JavaScript 程序员中有一句话:“Eval is Evil”,所以要不惜一切代价避免它!

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

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

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

F
Fenix Aoras

因为这个问题,我把所有的头发都剪掉了。我不能让上面的例子工作,所以我结束了:

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

这就像一种魅力......至少对于我需要的东西。希望它可以帮助一些人。


N
Naramsim

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

N
NullPointer

您也可以使用 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 是我的助记符。
c
cochon

这是另一种方法:

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

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

B
Biletbak.com

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

get方法作为参数:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

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

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

请解释一下你的答案。
V
Victor

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

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

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

请参阅JsFiddle


s
sumit

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

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

起初

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

MADE A NEW FUNCTION 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);
}

D
Don Quixote

通过使用 ES6:


const invoke = (callback) => {
  callback()
}


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

A
Akin Zeman

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

convertToFunc( "runThis('Micheal')" ) function convertToFunc( str) { new Function( str )() } function runThis( name ){ console.log("Hello", name) // 打印 Hello Micheal }


g
gazgas

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