JavaScriptで、メソッドの前後に処理を追加する

JavaScriptでUserScriptを書いている時に、その画面で使用している関数に処理を追加したい(Hookしたい)時が多々あります。 (最近だと、RedmineのView customize plugin を使って、Redmineの画面をがりがりカスタマイズしているので、そこでRedmineの関数に追加したりしています)

そんな時にやるのは、既存の関数を別の変数に退避した後に、その関数を再定義し、再定義した関数内で、退避した関数を呼び出すような形です。言葉で書くとわかりずらいですが、下記のような感じです。

// funcAの関数の前後に処理(before/after)を追加
var _funcA = funcA;

funcA = function() {
  before(); 

  _funcA();

  after();
}

引数やthisを意識する場合には、Functionのapplyメソッドを使います。

// thisをもともとの関数と同じスコープにするのと、引数もそのまま引き継ぎ
var _funcA = Clazz.funcA;

Clazz.funcA = function() {
  before();

  // 本関数での引数とスコープで呼び出し
  var result = _funcA.apply(this, arguments);

  after();

  return result;
}