かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

javascript 引数の配列を展開して関数に渡したい。

jQuery.triggerみたいな処理をjQuery以外で使いたい。
.trigger() | jQuery 1.9 日本語リファレンス | js STUDIO

要は.triggerと同じで引数に関数名と配列を渡して、
その関数に配列を展開した引数を渡して実行する見たいな事をしたい。
ActionScriptのdispatecEventみたいなイメージ?ちょっと違うか。

例えば、オブジェクト内のイベントをjQueryのtriggerみたいに呼び出したいみたいな想定。

var Obj = funtion(elm, options) {
  return this.init(elm, options);
}
$.extend(Obj.prototype, {
  init: function(elm, options) {
    this.el = elm;
    this.options = options;
    return this;
  },
  // 外から実行するtriggerの様な関数
  triggerEvent: function(fn, arg) {
    if( this[fn] && typeof(this[fn]) === 'function' ) {
      this[fn](arg);
    }
    return this;
  },
  // function: hoge
  hoge: function(arg) {
    console.log(arg); // -> ["fuga", "Mofu"] 
    return this;
  }
});

// 実行
var obj = new Obj('#div', {});
obj.triggerEvent('hoge', ['fuga', 'Mofu']);

これでは、triggerEventで呼び出される関数の引数は配列のままです。これを配列ではなく、配列が展開された状態で関数を呼び出したいのです!

調べてた結果、どうやらapplyを使えば配列が展開されて渡されるっぽい!
で、先のコードを修正します。

var Obj = funtion(elm, options) {
  return this.init(elm, options);
}
$.extend(Obj.prototype, {
  init: function(elm, options) {
    this.el = elm;
    this.options = options;
    return this;
  },
  // 外から実行するtriggerの様な関数
  triggerEvent: function(fn, arg) {
    if( this[fn] && typeof(this[fn]) === 'function' ) {
     // 引数の配列が展開して渡されるように apply を使う
      this[fn].apply(this, arg);
    }
    return this;
  },
  // function: hoge 引数は aとb
  hoge: function(a, b) {
    console.log(a); // -> "fuga"
    console.log(b); // -> "Mofu"
    return this;
  }
});

// 実行
var obj = new Obj('#div', {});
obj.triggerEvent('hoge', ['fuga', 'Mofu']);

applyを使って関数を呼び出すことで、
jQueryのtriggerみたいな処理を実装することが出来ました。


[参考にしました]
JavaScriptで、配列を展開してメソッドに渡す方法 | IT Office Nishimiyahara

単純にやってみたかっただけなので、素直にBackbone使えよ。とかは無しの方向でお願いします><