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文でオブジェクトを作成し、new演算子でインスタンスを生成する方法には以下のようなメリットがある。
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が表示される。プライベート変数には外部からアクセスできない
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』 オライリー・ジャパン
* functionを文と式で定義した場合の違いについて分かりやすく解説してあるサイト。
参考サイト:JavaScriptのfunction文とfunction式を考えてみる – webアプリの開発日記
** JavaScriptはJavaのような雛型的クラス定義はない。function文はオブジェクトそのもの。function文で作成したオブジェクトからnew演算子を使ってインスタンス(これもオブジェクト)を作成する。
No comments yet.
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。