JavaScript関数をパラメーターとして渡す


665

関数を「親」関数で実行せずに、または使用せずに関数をパラメーターとして渡すにはどうすればよいeval()ですか?(私はそれが安全でないと読んだので。)

私はこれを持っています:

addContact(entityId, refreshContactList());

refreshContactList機能しますが、問題は、関数で使用されるときではなく、関数が呼び出されたときに発生することです。

私はそれを回避することができましたがeval()、私が読んだことによると、それはベストプラクティスではありません。JavaScriptで関数をパラメーターとして渡すにはどうすればよいですか?

回答:


930

括弧を削除するだけです:

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

6
@ stevefenton、h2oooooooコメントで回答を更新することを検討してください。非常に便利です。
モーガンワイルド

5
質問に基づいて、コールバックはパラメーターを受け入れません。そのため、例では省略しています。それについてコメントを追加します。
Fenton

4
@Veverkeそれはこのようになります...addContact(1, function(id) { console.log(id); });
フェントン

4
@Steve Fenton:返信を読んだ後、なぜ私が質問したのかを自問しました... :-)
Veverke

1
ECMAScriptのクラス構文は、=記号class myFuncs {ではなく... ではありませんclass myFuncs = {。また、クラス構文をサポートする環境で実行する必要があります(すべてのブラウザーがまだそれをサポートしているわけではありません)。それでも苦労している場合、問題は関数の受け渡しではなく、一般的なES構文であるため、まったく新しい質問に適している可能性があります。
Fenton

338

関数を渡したい場合は、括弧なしで名前で参照してください:

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関数を使用して、次のような引数の配列である3番目のパラメーターを使用することもできます。

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

72
彼は引数付きの関数を渡す方法にも取り組むので、これはより高くランク付けされるべきです
デルタニン2014

3
引数または変数としてJavaScript関数を渡すことができることなど- -であり、私はこれに追加されます何かだけでは、この機能があることである機能。JavaScriptは非常に強力とのコードにそれほど大きくなります
TheHansinator

@ Compynerd255私は同意します。これと、オブジェクトリテラルをすばやく作成する機能は、JavaScriptの私の2つのお気に入りの側面です。オブジェクトリテラルを持たない言語では、オブジェクトリテラルが欠けています。
dallin '10 /

3
この機能を提供してくれたJavascriptと、@ dallinがこの機能の存在を知らせてくれたことに感謝します。
ディペンドゥポール2016

「無名関数でラップする」の例では、明確でない場合、無名関数は関数自体(パラメーター付き)を返し、func()の括弧に達したときに呼び出されます。これには少し時間がかかったので、他の人の役に立つかもしれないと思いました。
hubpixel

51

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

これを見て


そうでなければ、未定義れます関数FUNCT(FOO){リターンのfoo()//これが返す}:最初の例では、あなたはこのように、returnキーワードを追加する必要があります
アルテムFedotov

34

関数をパラメーターとして渡すには、括弧を削除するだけです!

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 */ }

2つの間に小さな違いがありますが、とにかく-どちらも関数を定義する有効な方法です。これで、関数を定義して明示的に変数に割り当てた場合、それを別の関数にパラメーターとして渡すことができるので、大括弧は不要です。

anotherFunction(ToBeCalledVariable);

2
ただ、typeof paramFunc == "function"それが呼び出し可能でない場合は、十分な、原因である、あなたはそれを無視することができます。
ジミークヌート2015年

16

JavaScriptプログラマーの間には「Eval is Evil」というフレーズがあるので、絶対に避けてください。

Steve Fentonの答えに加えて、関数を直接渡すこともできます。

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

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

8

私はその問題ですべての髪を切り刻んだ。上記の例を機能させることができなかったため、次のように終了しました。

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

そしてそれは魅力のように働いています...少なくとも私が必要なもののために。それがいくつかを助けることを願っています。


6

パラメータを配列に入れ、.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

5

を使用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");

それでおしまい。私もこのソリューションを探していて、他の回答で提供されているソリューションを試しましたが、最終的に上記の例から機能しました。


2

ここに別のアプローチがあります:

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

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

2

実際には、少し複雑に思えますが、そうではありません。

パラメータとしてメソッドを取得:

 function JS_method(_callBack) { 

           _callBack("called");  

        }

パラメータメソッドとして指定できます。

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

1
答えを説明してください。
MillaresRoo 2014年

2

他の答えは何が起こっているかを説明する優れた仕事をしますが、1つの重要な「落とし穴」は、通過するすべてのものが実際に関数への参照であることを確認することです。

たとえば、関数ではなく文字列を渡すと、エラーが発生します。

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

JsFiddleを参照してください


0

イベントハンドラを処理する必要があり、引数としてeventも渡す必要がある場合、react、angularなどの最新のライブラリのほとんどでこれが必要になることがあります。

OnSubmit関数(サードパーティライブラリの関数)をreactjsのカスタム検証でオーバーライドする必要があり、以下のように関数とイベントの両方を渡しました

元々

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

-3

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

そして、クラスをオブジェクトプロトタイプとして使用するオブジェクトパラダイム:

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

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


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

9
最上位のコード例はJSONではありません。これは標準のJavaScriptオブジェクトです。また、JSONで関数を送受信することもできません。
マシューレイトン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.