クラスの継承

今回はクラスの継承について説明します。

C++でもおなじみの継承ですが、JavaScriptでもクラスの継承ができます。
前回の講座で説明した、Prototypeプロパティの概念が重要になってくるので、
心配な方は前回の講座を復習してみてください。
まず下記のコードをみてください。

///////クラスOBJECTの定義///////////////
var OBJECT = function(n,a){
	this.name=n;
	this.age=a;
	this.display = function(){
		alert("名前は"+this.name+"で、年齢は"+this.age+"歳です。");
	}
}
///////定義ここまで////////////////////

function classtest4(){
	
	//新しい空のクラスを宣言
	var OBJECT4 = function(){};
	//そのクラスのprototypeにOBJECT1のオブジェクトを代入
	OBJECT4.prototype = new OBJECT("管理人",50);
	
	//OBJECT4のクラスのオブジェクトを生成。
	var temp = new OBJECT4();
	
	//継承してるので、OBJECT1の関数が実行可能
	temp.display();
	
}

↑実行してみてください。
メッセージが表示されましたね。
それではコードの解説を行います。
結論から言いますが、クラスを継承するには、
継承先のクラスのprototypeに継承元のオブジェクトを生成して代入します。

classtest4関数を見てください。
まず、OBJECT4という関数を空っぽの状態で定義しています。
その次の行で、prototypeにOBJECTクラスのオブジェクトをnewで生成して代入しています。
これで、OBJECT4のクラスはOBJECTクラスを継承することが出来ました。
後は、OBJECT4のオブジェクトを生成すれば、OBJECTクラスの変数や関数にアクセスできます。
最後の行で、OBJECTクラスのdisplay関数にアクセスしていますね？
これが継承されている証拠です。
そんなに難しくありませんよね。

この仕組みを論理的に説明すると、
JavaScriptのクラスというのは、まず最初に自分のインスタンス内に、呼ばれた変数や関数がないかを確認します。
なければ、次にprototypeプロパティにそれらがないかを確認します。
それでもなければ、prototypeプロパティに代入されたオブジェクトを参照しに行きます。
今回でいうとそれが、OBJECTクラスのオブジェクトです。
その中にもなければ、OBJECTクラス内のprototypeを見にいくということになります。
どのように変数が参照されていくかが分かりましたでしょうか？

ちなみにすでに、OBJECT4のprototypeにはOBJECTクラスのオブジェクトが入っていますが、
この後さらに、別のクラスを代入した場合は、後から代入したクラスのオブジェクトに入れ替わります。
ですが、まだ新しいクラスを代入していない段階で、
OBJECT4のクラスのオブジェクトを生成して変数に保持していた場合は、
後から新しいクラスをprototypeに代入したとしても、その変数には変更前のクラスのオブジェクトが入っています。
つまり変更前のクラスの関数や変数等にアクセスできます。

これがJavaScriptの継承になります。
あまり使うことないかもしれませんが、知っておくと便利ですので是非覚えましょう！

>> 【Ajaxについて】に進む
>> JavaScript入門トップに戻る

おすすめ参考書