Hatena::ブログ(Diary)

わからん

2012.11.25

[] 引数をとるコールバック関数の実現の仕方

以下では、「コールバック関数を引数で受け取る関数」と「引数を持たないコールバック関数」を定義し、呼び出しています。

    function f1(callback){
      console.log('f1');
      callback();
    }

    function f2() {
      console.log('f2');
    }

    f1(f2);

    //=> f1
    //=> f2

では、「コールバック関数を引数で受け取る関数」に、「引数のあるコールバック関数」を渡すにはどうすればよいでしょうか。


 方法1


「コールバック関数を受け取る関数」の定義を、コールバック関数の引数も自身の引数として受け取るように変更します。

    function f1(callback, arg1){
      console.log('f1');
      callback(arg1);
    }

    function f2(arg1) {
      console.log(arg1);
    }

    f1(f2, 'foo');

    //=> f1
    //=> foo

 方法2


コールバック関数で「引数情報をもつ関数」を返すように、戻り値を変更します。

    function f1(callback){
      console.log('f1');
      callback();
    }

    function f2(arg1) {
      return function() {
        console.log(arg1);
      };
    }

    f1(f2('foo'));

    //=> f1
    //=> foo

 方法3


関数オブジェクトは、あらかじめ bind() というメソッドを持っています。bind() を使えば、いわば、関数をその場で呼び出すことなく引数をあらかじめ与えておくことができます。bind() の正確な説明を知っておく必要があるなら、Annotated ES5 の Function.prototype.bind の節 が参考になります。以下はかんたんなサンプルです。

    function f2(arg1) {
      console.log(arg1);
    }

    fnobj = f2.bind(this, "foo")
    fnobj(); //=> foo

この bind() を使うことで、引数をとる関数をコールバック関数にすることができます。

    function f1(callback){
      console.log('f1');
      callback();
    }

    function f2(arg1) {
      console.log(arg1);
    }

    f1(f2.bind(this, 'foo'));

    //=> f1
    //=> foo

 

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

Google
Connection: close