>> JavaScript入門トップに戻る

クラスについて【その３】

今回はクラスについて、さらに深く解説していきます。

前回は生成したオブジェクトに変数や関数を追加できることを説明しました。
今回教える方法は、オブジェクトを生成した後でも、クラス自身に関数や変数を追加することができます。
それには、prototypeプロパティというものを理解する必要があります。

JavaScriptのオブジェクトにはprototypeプロパティというものを持っています。
最初はこのプロパティは空っぽなのですが、変数や関数を追加することが可能です。
ですが、ちょっと特殊な構造なので説明します。
例えば、OBJECTというクラスがあって、変数二つと、prototypeプロパティを持っています。

●OBJECTクラス
　・変数figure1
　・変数figure2
　・prototypeプロパティ

次のこのprototypeプロパティに、figure1とfigure3という名前の変数を追加します。

●OBJECTクラス
　・変数figure1
　・変数figure2
　・prototypeプロパティ
　　　・変数figure1
　　　・変数figure3

今の状態はこうなっています。
OBJECTクラス内にはfigure1という変数が二つ存在しています。
この場合、figure1の変数の値を表示させようとすると、
OBJECTクラス直下の(prototypeじゃない方)figure1の変数の値が表示されます。
figure3の変数の値を表示すると、OBJECTクラス直下には変数figure3という名前の変数がないので、
prototype内のfigure3の変数の値を参照しにいきます。
つまり、変数を参照するときは、まずOBJECTクラス直下を検索し、その変数がなかった場合は、
prototypeプロパティの中を参照し、あればその変数を表示しているということになります。
以下のコードを見てください。

var OBJECT2= function(a,b){
	this.figure1=a;
	this.figure2=b;
}

function classtest3(){
	
	var temp=new OBJECT2("ABC","CDE");
	
	OBJECT2.prototype.figure1="EFG";
	OBJECT2.prototype.figure3="HIJ";
	
	alert(temp.figure1);
	alert(temp.figure3);
}

test
↑実行してみてください。
ABCとHIJが表示されましたよね？

コードの解説をします。
まず、OBJECT2というクラスを、figure1、figure2というメンバ変数を定義して宣言しています。
これを、classtest3関数内で、オブジェクトを生成しています。
コンストラクタの処理で、figure1にはABCが、figure2にはCDEが代入されました。

その次の行で、OBJECT2クラスのprototypeプロパティに値を代入しています。
prototypeプロパティに代入するには、
クラス名.prototype.変数名=値
と書きます。
生成したオブジェクトに追加するのではなくて、直接クラス名を指定するところに注意。
今回は、figure1にEFGをfigure3にはHIJを代入しています。

次の行で最初に生成したOBJECT2クラスのオブジェクトのfigure1とfigure3の値を表示していますが、
figure1は最初にコンストラクタで生成した「ABC」の値が表示されました。
prototypeではEFGと代入したのに、これは表示されていません。
なぜかはわかりますよね？
先にクラス内のメンバを参照してfigure1という値があったため、そちらの値を表示したのである。
逆にfigure3については、クラス内にその名前のメンバ変数がなかったため、prototypeプロパティを参照し、
そちらの値を表示した、というわけである。
これらについては関数についても同じである。
prototypeプロパティの仕組みがお分かりいただけただろうか？
ではprototypeプロパティのfigure1にはどうやってアクセスするのか？ということになるが、
その場合は直接、
OBJECT2.prototype.figure3
と書けばアクセスできる。

最初に言っていたように、prototypeプロパティに追加した変数や関数は、
クラス自身に追加しているので、その後の生成されるインスタンスでも使うことができる、ということになる。
ただし、クラス直下に同じ名前のものがあった場合はそちらが優先される、ということである。

かなり難しかったと思いますが、理解できましたでしょうか？
次回はクラスの継承について説明します。



>> 【クラスの継承】に進む
>> JavaScript入門トップに戻る