Prototype.js を使った JavaScript OOP 講座 #03

社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。

※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。

※信念は「教わるのではなく、必死に着いていきませう」

前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。

ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。

しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。

JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。

そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。

今回は、 Prototype.js を読むために必要な知識を身につけましょう。直接 Prototype.js には触れませんが、必ず必要な知識です。

次回から Prototype.js の中身を読んでいくことにします。

Section 00 JavaScript 絡み合う二つの鎖（チェーン）

カッコよく初めてみました。

プロトタイプチェーン
スコープチェーン

JavaScript を完全に理解するには、この二つの鎖を理解しなければなりません。

Section 01 一つめの鎖。プロトタイプチェーン

プロトタイプチェーンは、クラス間の継承関係を表すものであり、クラスとインスタンスの関係を表すものでもある。

言い換えると、JavaScript において継承もインスタンス化も同じプロトタイプチェーンという仕組みを使って行われる。

つまり、JavaScript では以下の二つはまったく同じであると言える。

クラスとインスタンスの関係
スーパークラスとサブクラスの関係

プロトタイプって？

あるオブジェクト「a」があったとして、a のコンストラクタの prototype プロパティにつながるオブジェクトのことを a のプロトタイプという。

var A = function(){};
var a = new A();

/* A.prototype が a のプロトタイプであるか確認する。 */
alert(A.prototype.isPrototypeOf(a));

/* Object.prototype が A.prototype プロトタイプであるか確認する。 */
alert(Object.prototype.isPrototypeOf(A.prototype));

上の例を実行

上の例より A.prototype が a のプロトタイプであること、 Object.prototype が A.prototype のプロトタイプであることが分かる。

また、 a → A → Object のようにプロトタイプがチェーンのように連鎖する構造から、このような構造をプロトタイプチェーンと呼ぶ。

プロトタイプってどういう影響を与えるの？

オブジェクトが生成されてから追加されたプロパティのことを Own Property と呼ぶ。

あるオブジェクトの Owner Property でないプロパティが参照された場合、そのオブジェクトのプロトタイプのプロパティが暗黙的に参照される。

それゆえ、オブジェクトはプロトタイプのコピーのように見え、プロトタイプのプロパティを自分のもののように扱うことができる。

これが、プロトタイプの影響である。

var A = function(){};

A.prototype = {
	prop: 'あぼーん'
};

var a = new A();

alert(a.prop);
alert(a.hasOwnProperty('prop'));
alert(A.prototype.hasOwnProperty('prop'));

a.prop = a.prop; // 一見意味のない処理

alert(a.prop);
alert(a.hasOwnProperty('prop'));
alert(A.prototype.hasOwnProperty('prop'));

上の例を実行

理解できましたか？

a.prop = a.prop を行ったことによって、 a に prop という Own Property が出来たのです。

つまり、上式の右辺は A.prototype の Own Property であり、左辺は a の Own Property であるということです。

もう一例挙げておきます。

var A = function(){};

A.prototype = [1];

var a = new A();

alert(a[0]);
alert(a.hasOwnProperty(0));
alert(A.prototype.hasOwnProperty(0));

a[0]++;

alert(a[0]);
alert(a.hasOwnProperty(0));
alert(A.prototype.hasOwnProperty(0));

上の例を実行

今度は理解できましたか？

プロトタイプチェーンを継承として使う

以下のようにすると、obj → Sub → Super → Object とプロトタイプチェーンが形成される。

var Super = function(){};
Super.prototype = {
	p0: 0,
	p1: 1,
	p2: 2,
	p3: 3
};

var Sub = function(){};
Sub.prototype = new Super();

var obj = new Sub();

このようにすれば、 Sub を new したものは Sub.prototype と Super.prototype のプロパティを自分のプロパティのように使える。

これが、プロトタイプチェーンを用いた継承である。