web-dev-qa-db-ja.com

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

"親"関数内で関数を実行せずに、またはeval()を使用しないで、関数をパラメータとして渡す方法はありますか。 （私は読んで以来、それは安全ではないと思います。）

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

addContact(entityId, refreshContactList());

これはうまくいきますが、問題はrefreshContactListが関数内で使用されているときではなく、呼び出されたときに起動されることです。

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

javascriptfunctionparameters
575
imperium2335

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

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

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

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

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

これを見て

47
Gadde

関数をパラメータとして渡すには、かっこを削除します。

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

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

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

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

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

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

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

それでおしまい。私もこの解決策を探していて、他の答えで提供されている解決策を試してみましたが、やっと上の例からうまくいくようになりました。

6
NullPointer

私はその問題ですべての髪の毛を切り落としました。私は上の例をうまく動かすことができなかったので、私は次のように終わった。

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

そしてそれは魅力のように働いています…少なくとも私が必要としていたもののために。助けになるかもしれないと思います。

5
Fenix Aoras

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

たとえば、関数ではなく文字列を渡すとエラーになります。

function function1(my_function_parameter){
    my_function_parameter();   
}

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

function1(function2); //This will work

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

JsFiddle を参照

2
Victor

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

メソッドをパラメータとして取得します。

 function JS_method(_callBack) { 

           _callBack("called");  

        }

あなたはパラメータメソッドとして与えることができます：

    JS_method(function (d) {
           //Finally this will work.
           alert(d)
    });
2
Hakkı Eser

これは別のアプローチです。

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

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

あなたがイベントハンドラを扱う必要があるときに引数としてもイベントを渡す必要がある時、反応のような現代のライブラリのほとんどは角度がこれを必要とするかもしれません。

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

もともと

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

新しい関数uploadを作成し、引数として渡されたonSubmitとeventを呼び出しました

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