オブジェクトリテラル : JavaScript

Tweet

Pocket

JavaScriptのオブジェクトリテラルのメモ

オブジェクトリテラルとは

オブジェクトリテラル{}について以下にわかりやすい説明がある。

	ECMAScriptにおける「オブジェクトリテラル」と言う書式に基づいています。「オブジェクトリテラル」は、次のように定義されています。

	* 「{ }」（中括弧）で囲み、中にプロパティをカンマ区切りで複数記述できる。
    	* プロパティは、「プロパティ名 : 値」と言う形式で記述する。
    	* プロパティ名は、識別子／文字列／数値。
	* 値は、代入式の右辺と成り得る式。
	

引用元:オブジェクトリテラルとJSON：続JavaScriptのオブジェクトについて

オブジェクトリテラルを使ったオブジェクトの定義

オブジェクトの生成と初期化を一つの式で済ませることができる上、非常にコードが見易くなるので、最近のJavaScriptプログラミングでは多用されています。

引用元:オブジェクトリテラルとJSON：続JavaScriptのオブジェクトについて

var o = {
    name : 'findxfine',
    showName : function() { 
        alert(this.name);
    }
};
o.showName(); // アラート表示	findxfine
o.name = 'test';
o.showName(); // アラート表示	test

オブジェクトリテラルはオブジェクトの生成と初期化を一つの式で済ませることができる。function文^*を使った上記と同様の処理を行う。

function CustomObject() {
    this.name = 'findxfine';
    this.showName = function() {
        alert(this.name);
    };
};
var o = new CustomObject();
o.showName(); // アラート表示	findxfine
o.name = 'test';
o.showName(); // アラート表示	test

以下、2010.11.16追加

JavaScriptのオブジェクトは、var d = new Date(); のように、new演算子とコンストラクタで生成されます。オブジェクトによってはリテラル表記も使えますが、それは処理系が生成と初期化をやってくれているのです。例えば var point = {x:20, y:30};は次のコードと同等です。

var point = new Object();
point.x = 20;
point.y = 30;

» プログラマのためのJavaScript (8)：オブジェクト生成の仕組み – 檜山正幸のキマイラ飼育記

オブジェクトリテラルはnew Object()のショートカットのようなもの。

var o1 = new Object();
var o2 = {};
// プロトタイプ
console.log(o1.__proto__ == Object.prototype); // true
console.log(o2.__proto__ == Object.prototype); // true
// コンストラクタ
console.log(o1.constructor == Object); // true
console.log(o2.constructor == Object); // ture

オブジェクトリテラルとfunction文を使った違い

オブジェクトリテラルはオブジェクトの生成と初期化を一つの式で済ませることができるので便利である。いっぽう、オブジェクトをfunction文で作成^**する場合の利点もある。
function文でオブジェクトを作成し、new演算子でインスタンスを生成する方法には以下のようなメリットがある。

• プライベート/パブリックといったアクセス制御ができる。
• new演算子で1つのオブジェクトから複数のインスタンスを作成できる。プロトタイプを使ってオブジェクトのメンバを定義すると効率が良い。

アクセス制御

function CustomObject() {
    var hoge = 'findxfine'; // プライベート
    this.setName = function(n) { hoge = n; }
    this.showName = function() { alert(hoge); }
}
var o = new CustomObject();
o.hoge = 'new hoge'; // パブリックなnameプロパティが追加
o.showName(); // アラート表示 findxfineが表示される。プライベート変数には外部からアクセスできない

new演算子とプロトタイプ

function CustomObject(name) {
    this.name = name; // パブリック
}
CustomObject.prototype.showName = function() {
   alert(this.name); 
}
var o1 = new CustomObject('no1');
var o2 = new CustomObject('no2');
o1.showName();
o2.showName();

オブジェクトリテラルからインスタンスを作成

Object.create = function (o) {
	var F = function () {};
	F.prototype = o;
	return new F();
}

参考文献: Douglas Crockford著, 水野貴明著 2008 『JavaScript: The Good Parts』 オライリー・ジャパン

関連記事

»JavaScriptオブジェクトの作成

* functionを文と式で定義した場合の違いについて分かりやすく解説してあるサイト。
参考サイト:JavaScriptのfunction文とfunction式を考えてみる – webアプリの開発日記
** JavaScriptはJavaのような雛型的クラス定義はない。function文はオブジェクトそのもの。function文で作成したオブジェクトからnew演算子を使ってインスタンス(これもオブジェクト)を作成する。