パラメータ付きの関数をパラメータとして渡しますか?


151

パラメータ付きのJavaScript関数をパラメータとして渡すことは可能ですか?

例:

$(edit_link).click( changeViewMode( myvar ) );

5
それはJQueryのように見え、おそらくそうですが、それは無関係です。使用方法やパラメータ、関数は、使用するJavaScriptライブラリに関係なく同じです。
グッファ09

@Guffa-jQueryでタグ付けする必要があるかどうか疑問に思いました
Russ Cam

1
@Lucia これに対する承認済みの回答を変更することを検討してください。
のMichałPerłakowski

Reactを使用している場合は、stackoverflow.com
questions / 41369497 /…を

回答:


244

「クロージャ」を使用してください:

$(edit_link).click(function(){ return changeViewMode(myvar); });

これにより、パラメータを認識し、それを実際のコールバック実装に渡す匿名の一時関数ラッパーが作成されます。


3
オブジェクトの関数を呼び出したい場合は、bind()を呼び出す必要があります。myObj.click(function(){this.doSomething();} .bind(myObj)); これは「これ」をmyObjにします。
2013年

1
これらの多くを扱う場合、これはパフォーマンスの問題ではありませんか?たとえば、OnPress in a Rowをレンダリングしていて、10,000行あるとします。これにより、各行に新しい匿名の一時関数ラッパーが作成されます。それを行う他の方法はありますか?
Joshua Pinter

@JoshuaPinterテクニック自体は問題ではありません。同じ関数呼び出しが10,000回必要な場合は、ラッパーを変数に保存するだけで作成できるので、作成は1回だけです。10,000の異なるコンテキストを渡す必要がある場合、できることはほとんどありません。時期尚早の最適化に注意してください:いつものように、パフォーマンスと同様に、問題があるかどうかを確認するために測定する必要があります。今日のJavaScriptエンジンは非常に強力であり、驚くべき方法でコードを最適化する可能性があります。
フェルディナンドベイヤー2017年

@FerdinandBeyerすごい、先端をありがとう。友人は、それは悪い習慣であり、代わりthis.myFunction = this.myFunction.bind(this)にあなたのconstructor方法で使うべきだと私に言った。しかし、あなたが言ったように、その行の詳細ページを開くためにクリックするすべての異なる行のように、それぞれに異なるコンテキストを渡す必要がある場合、それは避けられません。
Joshua Pinter 2017年

@FerdinandBeyerは、MYVARが文字列であり、そのクロージャとしてchangeViewModeを渡して連続する2回の呼び出しの間で変更しましたが、changeViewModeは常にMYVARの最初の値を受け取ると言うことができます、私は、同じMYVAR変数に割り当てられた異なる引数の値とクロージャ関数を呼び出したいです
nmxprime

42

を使用しFunction.prototype.bind()ます。MDNの引用:

このbind()メソッドは、呼び出されたときにthisキーワードが指定された値に設定された新しい関数を作成し、新しい関数が呼び出されたときに指定された引数のシーケンスに先行して引数を与えます。

IE9 +を含むすべての主要なブラウザーでサポートされています。

コードは次のようになります。

$(edit_link).click(changeViewMode.bind(null, myvar));

サイドノート:私はあなたがグローバルなコンテキストにいると仮定します、すなわちthis変数はwindowです。それ以外の場合は、のthis代わりに使用してくださいnull


おかげで、これは私を助けました。これを次のように使用しました:$.ajax(url).done(handler.bind(this, var1, var2));
Thomas

2
どのオプションが最適ですか?クロージャーを使用するか、バインド機能を使用しますか?パフォーマンスに影響がある場合はお知らせください
Varun


15

いいえ。ただし、パラメータなしで渡すことができ、次のようにします。

$(edit_link).click(
  function() { changeViewMode(myvar); }
);

したがって、パラメーターなしの無名関数を渡しています。その関数は、クロージャー内の変数を使用してパラメーター化された関数を呼び出します。




2

あなたはこれを行うことができます

var message  = 'Hello World';

var callback = function(){
alert(this)
}.bind(message);

その後

function activate(callback){
  callback && callback();
}

activate(callback);

または、コールバックにより柔軟なロジックが含まれている場合は、オブジェクトを渡すことができます。

デモ


2

これは、Ferdinand Beyerのアプローチに従った例です。

function function1()
{
    function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
    $(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }

この例では、「パラメーター値」は、関数ラップを使用してfunction2を通じてfunction1からfunction3に渡されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.