JavaScriptのオブジェクト指向 (5/7)

一般のオブジェクト指向言語には、「継承」と呼ばれる機能があります。一般の言語では、コンストラクタ関数ではなくて、「クラス」という、オブジェクトの設計図のようなものを用意して、そこからオブジェクトを作ります。そして、あるクラスの機能をすべて受け継いで新しいクラスを作ることを「継承」と呼んでいます。

この継承を使うと、既にあるクラスを元に、更に機能を拡張して簡単に新しいクラスが作れます。オブジェクト指向でも、非常に重要な機能の一つです。では、JavaScriptでは、継承はどのようにするのでしょうか。

JavaScriptには、クラスはありません。あるのはコンストラクタ関数です。関数は、「継承して新しい関数を作る」なんてことはできません。では、どうやって、既にあるオブジェクトを継承して更に拡張したオブジェクトを作ればいいのか。簡単です。新しいオブジェクト用のコンストラクタから、継承したいコンストラクタ関数を呼び出せばいいのです。

既にあるオブジェクトを継承して新しいオブジェクトを作成するためのコンストラクタ関数の書き方を下のリスト部分に掲載しておきます。オブジェクトには「call」と呼ばれるメソッドが必ず用意されています。これは、そのオブジェクトのコンストラクタ関数を呼び出すためのものです。これにより継承したいオブジェクトのコンストラクタが呼ばれ、そのオブジェクト自身にプロパティやメソッドなどが実装されるのです。

callを呼び出すとき、注意しなければいけないのは、「最初の引数にthisを渡す」ということです。そして、それ以降に、呼び出すオブジェクトのコンストラクタ関数の引数を用意します。こうすることで、渡したthisにcallで呼び出したコンストラクタのプロパティやメソッドが実装されます。


では、先ほどのMyDataObjectを継承して、MySuperDataObjectというオブジェクトを作ってみましょう（下のリスト部分を参照）。ここでは、名前・年齢・メールアドレスに加え、更に電話番号とメモをプロパティで保管しています。また、showDataの内容を書き換え、５つのプロパティをすべて表示するようにしています。

スクリプトを実行すると、MyDataObjectとMySuperDataObjectをそれぞれ１つずつ作成し、showDataメソッドを呼び出します。このMySuperDataObjectのコンストラクタでは、まず最初に、

MyDataObject.call(this,name,age,mail);

このようにしてMyDataObjectをcallしています。これにより、MyDataObjectの内容がthisに実装されます。そして、更にtel/memoプロパティを追加し、showDataメソッドを書き換えています。MySuperDataObjectには、name/age/mailといったプロパティはありませんが、ちゃんとそれらの値は保管されているのがわかります。MyDataObjectの機能がすべてMySuperDataObjectに組み込まれていることがよくわかるでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※継承を利用したコンストラクタ関数の定義

function 新しい関数 ( …引数… ){

    オブジェクト.call ( this, …引数… );

    ……以下、プロパティ・メソッドの定義を用意する……

}


※サンプルスクリプト

<script type="text/javascript">
<!--
function MyDataObject(name,age,mail){
	this.name = name;
	this.age = age;
	this.mail = mail;
	
	this.showData = function(){
		var result = '名前：' + this.name + '\n';
		result += '年齢：' + this.age + '歳\n';
		result += 'メール：' + this.mail;
		alert(result);
	}
}

function MySuperDataObject(name,age,mail,tel,memo){
	MyDataObject.call(this,name,age,mail);
	this.tel = tel;
	this.memo = memo;
	
	this.showData = function(){
		var result = '名前：' + this.name + '\n';
		result += '年齢：' + this.age + '歳\n';
		result += 'メール：' + this.mail + '\n';
		result += '電話：' + this.tel + '\n';
		result += 'メモ：' + this.memo;
		alert(result);
	}
}

var obj1 = new MyDataObject('山田太郎',18,'taro@yamada');
var obj2 = new MySuperDataObject('田中花子',26,'hanako@flower','090-7777-7777','山田君の彼女です。');

obj1.showData();
obj2.showData();
//-->
</script>