« Apacheの.htaccessによるベーシック認証 | メイン | JavaScriptオブジェクトの継承定義 »

JavaScriptのコンストラクタ関数

AJAXが注目される前まで、JavaScriptはウィンドウのポップアップやFlushの代用などWebページのアクセサリ的な道具として使われてきました。ところがどっこい、充分にオブジェクト指向言語なのです。JavaScriptで独自のオブジェクトを生成し、メソッドやプロパティを定義できます。

非常に簡単なサンプルを以下に示します。

<html>
<head>
<script type="text/javascript">
function Foo(name){
    // オブジェクトのプロパティ
    this.name=name;
    // メソッド
    this.display=function(){
        document.getElementById('name').innerHTML=this.name;
    }
}
window.onload = function () {
var foo=new Foo('ばー');
foo.display();
}
</script>
</head>
<body>
<div id="name"></div>
</body></html>

ここで、Foo(name)はJavaScriptでコンストラクタ関数と呼ばれるものです。thisキーワードを用いてオブジェクトのプロパティを定義しています。Javaに親しんでいる人ならピンとくるでしょうが、thisは現在のオブジェクト(インスタンス)への参照に使います。

コンストラクタが定義されれば、newによってオブジェクトはインスタンス化でき、普通にJavaScriptの変数に割り当てられます。当然ながら、プロパティにそれぞれ違う値を持つ複数のオブジェクトが生成可能です。

Fooオブジェクトが持つdisplayプロパティに注目してください。これは公開されたメソッドで、foo.display()のように呼出します。

JavaScriptオブジェクトにはconstructorプロパティがあります。サンプルではalertメソッドでconstructorの定義を出力しています。これでオブジェクトのメソッドとプロパティを確認できます。これは便利そうですね。

constructor.JPG

AJAXを目指すなら、再利用できないグローバルな変数や関数を多用したプログラミングは止めて、オブジェクトを利用すべきですね。

トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/45

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)