prototype.jsの活用にはFunction.applyがどう振舞うか知っておきたい

prototype.jsを使いはじめたとき、スッキリと受け入れにくい機能や構文に出くわすことが多々ありました。

いま振り返ってみると、prototype.jsの中で使われるJavaScriptのFunction.applyの理解不足が原因だった気がします。つまりFunction.applyの振る舞いを理解しておくことがprototype.jsを活用する近道になります。

次のような簡単な関数を使ってFunction.applyの振る舞いを観察します。

function f() {
  alert(this.v);
}

次のようにそのまま関数fを呼び出すと「undefined」というメッセージが表示されます。

f();

次のようにFunction.applyを使って関数fを呼び出すと「Are you ready?: 1」というメッセージが表示されます。このときFunction.applyの引数にオブジェクトを指定したのがポイントです。

var foo = new Object();
foo.v = 'Are you ready?: 1';
f.apply(foo);

次のような簡単なクラスを使ってFunction.applyの振る舞いを観察します。

var Foo = Class.create();
Foo.F1 = function() {
  f();
}
Foo.F2 = function() {
  f.apply(this);
}
Foo.prototype = {
  initialize: function() {
    this.v = 'Are you ready?: 2';
  },
  f1: function() {
    f();
  },
  f2: function() {
    f.apply(this);
  }
}

次のようにstaticメソッド(風関数)から関数fを呼び出すと、両者とも「undefined」というメッセージが表示されます。このとき両者の結果が同じ(違いがない)ことがポイントです。

Foo.F1();
Foo.F2();

次のようにオブジェクトを生成してメソッドから関数fを呼び出すと、前者は「undefined」後者は「Are you ready?: 2」というメッセージが表示されます。このときFunction.applyの引数に自分自身のオブジェクトを指定したのがポイントです。

var foo = new Foo();
foo.f1();
foo.f2();

関数fを呼び出すときの状況、関数fを呼び出すときにFunction.applyを使うかどうかに注目してください。またそのときのthis.vの値を比較しながらFunction.applyの仕様を再確認してください。きっとFunction.applyの振る舞いがイメージしやすくなり理解が進むと思います。