FindxFine

JavaScriptオブジェクトの作成 : JavaScript

JavaScriptのオブジェクトの作成は2通り

• オブジェクトリテラル(オブジェクト初期化子)
• コンストラクタ

オブジェクト初期化子{}

オブジェクトの作成と変数への代入を同時に行う。

var obj = {
	message : 'test',
	showMessage : function(){ alert(this.message); }
}
// メソッドを実行
obj.showMessage();

コンストラクタ

インスタンスをコンストラクタからnew演算子を使って作成。
JavaScriptのコンストラクタは単なるJavaScript関数オブジェクト。
関数がコンストラクタであることを分かりやすくするために関数名を大文字で始めることが多い。

// オブジェクト作成
var CustomObject = function(message) {
	// インスタンスプロパティ
	this.message = message;
}
/* 上記の関数式は文として定義する下記と同じ
function CustomObject(message) {
	// インスタンスプロパティ
	this.message = message;
}
 */
// スタティックメソッド
CustomObject.staticMessage = function() {
	alert("CustomObject");
}
// インスタンスメソッド
CustomObject.prototype.dynamicMessage = function() {
	alert(this.message);
}

// スタティックメソッド実行　
// スタティックメンバはインスタンスを作成しなくても呼び出し可能。
CustomObject.staticMessage()

//new演算子を使ってコンストラクタ(関数オブジェクト)から インスタンス作成
var obj1 = new CustomObject('test1');
var obj2 = new CustomObject('test2'); 

// インスタンスメソッド実行
obj1.dynamicMessage(); // test1が表示
obj2.dynamicMessage(); // test2が表示

prototypeを使わず、下記のようにインスタンスメソッドを定義することもできる。

function CustomObject(message) {
	// インスタンスプロパティ
	this.message = message;
	// インスタンスメソッド
	this.dynamicMessage = function() {
		alert(this.message);
	}
}
// インスタンス作成
var obj1 = new CustomObject('test1');
var obj2 = new CustomObject('test2'); 

// インスタンスメソッド実行
obj1.dynamicMessage(); // test1が表示
obj2.dynamicMessage(); // test2が表示

prototypeを使わないで定義した場合、インスタンスの作成のたびにdynamicMessageが作成され効率が悪い。
JavaScriptではオブジェクトに定義されていないメンバはプロトタイプを参照するのでprototypeに定義したほうが効率が良い。

関連記事

»オブジェクトリテラル

このページの上へ移動

      Google   

2009/8/23 日 | Javascript, Others, grammar, grammar | 固定リンク |

このページの上へ移動