Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

Javascriptは、プロトタイプベースのオブジェクト構文をサポートした、動的なスクリプティング言語です。Javascriptにはオブジェクトがあり、オブジェクトはデータとデータに作用するメソッド、さらには他のオブジェクトをも含むことができます。プロトタイプベースなJavascriptには、クラスベースなJavaやC++と違ってクラスがありません ...が、それに代わるものとしてコンストラクタが存在します。

オブジェクト指向を理解しておくと、DOMを扱う時に楽。

クラスの定義

1. function Image() {
2. this.width = 0;
3. this.height = 0;
4. this.src = '';
5. }
6. Image.prototype.type = 'image object';
7. Image.prototype.width = null;
8. Image.prototype.height = null;
9. Image.prototype.src = null;

前半はコンストラクタ関数。クラス生成時に一度だけ自動で実行される。そしてコンストラクタ関数の名前が、そのままクラス名になる。

後半はprototypeプロパティを使った初期値の設定。以後、このクラスの全てのインスタンスに継承される。

メソッドの定義

1. Image.prototype.resizeImg = function(newWidth, newHeight) {
2. this.width = newWidth;
3. this.height = newHeight;
4. };

まとめて設定

以下のような書き方も可能。

1. Image.prototype = {
2. type : 'image object',
3. width : null,
4. height : null,
5. src : null,
6. resizeImg : function(newWidth, newHeight) {...}
7. };

オブジェクト生成例１

1. var objBody = document.getElementsByTagName("body").item(0);
2.  
3. var objOverlay = document.createElement("div");
4. objOverlay.setAttribute('id','overlay');
5. objOverlay.style.display = 'none';
6. objOverlay.onclick = function() { myLightbox.end(); return false; }
7. objBody.appendChild(objOverlay);
8.  
9. var objLightbox = document.createElement("div");
10. objLightbox.setAttribute('id','lightbox');
11. objLightbox.style.display = 'none';
12. objBody.appendChild(objLightbox);

Lightbox JS v2.0からオブジェクトの生成部分を抜粋。実際使われているだけあって、この一連の操作は、かなり使える。

オブジェクト生成例２

1. insertImg = new Image();
2. insertImg.src = imgSrc;
3. insertImg.id = 'originalImg';
4.  
5. imgContainer.appendChild(insertImg);

ごく単純な生成例。もともと定義されているImageクラスのクローンを生成し、値を与えている感じ。

コンストラクタの確認

1. if (aImage.constructor != Image) return;

aImageがImageクラスのインスタンスであるかどうか確認している。