>> JavaScript入門トップに戻る

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

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

前回は生成したオブジェクトに変数や関数を追加できることを説明しました。
今回教える方法は、オブジェクトを生成した後でも、クラス自身に関数や変数を追加することができます。
それには、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);
}


↑実行してみてください。
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入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)