libro
www.tuyano.com
初心者のためのJavaScriptプログラミング入門

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

作成:2010-04-01 18:14
更新:2010-05-11 17:14

■コンストラクタ関数

しかし、先のMyDataオブジェクトの作り方は、あまりスマートなやり方とはいえません。これは、要するに「1つ1つのオブジェクトを、手作していく」やり方です。例えば、同じようにして「山田さん」「田中さん」「佐藤さん」といったオブジェクトを作ろうとしたら、1つ1つ配列(=オブジェクト)を作って、値を代入していって……とやらないといけません。

このやり方の最大の問題は、「全く同じ内容のオブジェクトを作れない」ということでしょう。内容が同じでないと、例えば「山田さん、田中さん、佐藤さんをまとめて表示する」とか、「作ったオブジェクトの中から高木さんを探し出す」といった操作ができません。なぜって、オブジェクトの中身がどうなっているかわからない、「必ずこういう作りになっている」という保証がないのですから。ひょっとしたらnameがないオブジェクトもあるかも知れない、showDataの名前がshowObjectになっているものもあるかも知れない。そんな「中身がどうなってるかわからないオブジェクト」がたくさんあっても、うまく利用することなどできません。

そこで、「同じ中身のオブジェクトを作る機能」というものが必要となります。それが「コンストラクタ」と呼ばれる関数です。

コンストラクタは、オブジェクトを作成するための関数です。これは、普通の関数と同様に定義をします(下のリスト部分を参照)。もちろん、普通の関数と違いはあります。このオブジェクト自身を「this」という予約語で扱えるようになっており、「this.プロパティ」「this.メソッド」といった形で、オブジェクト自身のプロパティやメソッドにアクセス出来るようになっています。

コンストラクタの中には、プロパティやメソッドの定義を記述しておきます。これは、thisを利用して自身の中のプロパティ・メソッドに値を代入してやればいいのです。そうやって、必要なプロパティやメソッドをコンストラクタの中で用意します。

コンストラクタは、そのまま関数として呼び出すのではなく、「new オブジェクト(……)」というように、newを使って呼び出します。今までも、newは登場しましたね。new Arrayなどで配列を作ったりしました。この「new」は、「オブジェクトを作成する」という働きをするものなのです。

○利用例○

では、先ほどのMyDataオブジェクトと同じものを作るコンストラクタ関数を作ってみましょう(下のリスト部分を参照)。今回は、「MyDataObject」という名前のオブジェクトをつくるコンストラクタを用意しました。その中で、name/age/mailといったプロパティ、そしてshowDataというメソッドを用意しています。

スクリプトでは、obj1,obj2,obj3という3つのオブジェクトを作り、それぞれshowDataで内容を表示させています。コンストラクタを使うと、引数に必要な値を渡してnewするだけで、プロパティやメソッドがすべて用意されたオブジェクトを作ることができます。3つのオブジェクトは、すべて中に同じプロパティ、同じメソッドが用意されていますから、いつでもそれらを利用することができます。「このオブジェクトにはshowDataがないからエラーになった」という心配はないのです。

※プログラムリストが表示されない場合

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

●プログラム・リスト●

※コンストラクタ関数の基本形

function オブジェクト名 ( …引数… ){

    this.プロパティ = 初期値;

    ……必要なだけプロパティを用意……
    
    this.メソッド = function( …引数… ){
        ……メソッドの内容……
    }

    ……必要なだけメソッドを用意……

}



※サンプルリスト

<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);
	}
}

var obj1 = new MyDataObject('山田太郎',18,'taro@yamada');
var obj2 = new MyDataObject('田中花子',26,'hanako@flower');
var obj3 = new MyDataObject('鈴木イチロー',39,'ichiro@baseball');

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

※関連コンテンツ

「初心者のためのJavaScriptプログラミング入門」に戻る