Object initializer

オブジェクトはnew Object()、 Object.create()、 リテラル表記法 (initializer 表記法)を使用して初期化されます。オブジェクト初期化子はオブジェクトのプロパティ名と関連した値のゼロ以上のペアのリストです。中括弧({})で囲まれます。

構文

var o = {};
var o = { a: "foo", b: 42, c: {} };

var a = "foo", b = 42, c = {};
var o = { a: a, b: b, c: c };

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {},
};

ECMAScript第６版での新しい表記法

これらの表記をサポートするための互換性の表を参照してください。非サポート環境では、これらの表記は、構文エラーにつながります。

// Shorthand property names (ES6)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

// Shorthand method names (ES6)
var o = {
  property([parameters]) {},
  get property() {},
  set property(value) {},
  * generator() {}
};

// Computed property names (ES6)
var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there",
};

説明

オブジェクト初期化子は、Objectの初期化を説明する式です。オブジェクトはプロパティからなり、オブジェクトを説明するために使用されます。オブジェクトプロパティの値は特定のprimitiveデータ型か他のオブジェクトのどちらかを含みます。

オブジェクトの生成

プロパティを持たない空のオブジェクトは下記のように生成されます。:

var object = {};

しかしながら、リテラル表記法かinitializer表記法の利点は中括弧内にプロパティをもつオブジェクトをすばやく生成できる点です。単にキーのリストを記譜します。: カンマで区切られた値のペアです。次のコードでは、三つのプロパティをもつオブジェクトを生成します。そして、そのキーは"foo"、"age"、"baz"です。これらのキーの値は、文字列の"bar"、数値の42、そして、三番目のプロパティは値として別のオブジェクトを持ちます。

var object = {
  foo: "bar",
  age: 42,
  baz: { myProp: 12 },
}

プロパティへのアクセス

いったんオブジェクトを生成すると、読んだり変更したりシたいかもしれません。オブジェクトプロパティはドット表記法かブラケット表記法を使用してアクセスされます。詳細については、property accessorsをご覧ください。

object.foo; // "bar"
object["age"]; // 42

object.foo = "baz";

プロパティの定義

初期化構文を使用してプロパティを記譜する方法について既に学びました。多くの場合、コード内には、オブジェクトに設定したい変数があります。下記のコードをご覧ください。:

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};

ECMAScript第６版では、同じことを達成するために利用可能な短い表記があります。:

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

重複したプロパティ名

プロパティに対して同じ名前を使用するとき、二番目のプロパティは最初のプロパティを上書きします。

var a = {x: 1, x: 2};
console.log(a); // { x: 2}

ECMAScript第５版strictモードのコードでは、重複したプロパティの名前はSyntaxErrorと考えられました。実行時に可能な重複するプロパティ名の導入を用いて、ECMAScript第６版では、この制限は取り除かれました。

function haveES6DuplicatePropertySemantics(){
  "use strict";
  try {
    ({ prop: 1, prop: 2 });

    // No error thrown, duplicate property names allowed in strict mode
    return true;
  } catch (e) {
    // Error thrown, duplicates prohibited in strict mode
    return false;
  }
}

メソッドの定義

オブジェクトのプロパティはfunction、getterメソッド、setterメソッドも参照することができます

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {},
};

ECMAScript第６版では、省略表記が利用可能です。そのため、キーワード"function"はもはや必要ではありません。

// Shorthand method names (ES6)
var o = {
  property([parameters]) {},
  get property() {},
  set property(value) {},
  * generator() {}
};

ECMAScript第６版では、その値がジェネレータ関数であるプロパティを簡潔に定義する方法があります。:

var o = {
  * generator() {
    ...........
  }
};

ECMAScript第５版では、下記のように記述します。(しかし、ES5はジェネレータを持たないことに注意してください):

var o = {
  generatorMethod: function *() {
    ...........
  }
};

メソッドの詳細や例については、method definitionsをご覧ください。

Computed property names

ECMAScript第６版で開始した、オブジェクト初期化子構文も計算されたプロパティ名をサポートします。括弧[]で式を設定できます。それはプロパティ名として計算されます。これはproperty accessor構文のブラケット表記に対称的です。それを既にプロパティを読み込みや設定するために使用しているかもしれません。今、オブジェクトリテラルでも同じ構文を使うことができます。:

// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

プロトタイプ変異

__proto__: value形式か"__proto__": value形式のプロパティ定義は__proto__名をもつプロパティを生成しません。かわりに、与えられた値がオブジェクトかnullの場合、その値に生成されたオブジェクトの[[Prototype]]を変更します。(その値がオブジェクトではないかnullの場合、オブジェクトは変更されません)

var obj1 = {};
assert(Object.getPrototypeOf(obj1) === Object.prototype);

var obj2 = { __proto__: null };
assert(Object.getPrototypeOf(obj2) === null);

var protoObj = {};
var obj3 = { "__proto__": protoObj };
assert(Object.getPrototypeOf(obj3) === protoObj);

var obj4 = { __proto__: "not an object or null" };
assert(Object.getPrototypeOf(obj4) === Object.prototype);
assert(!obj4.hasOwnProperty("__proto__"));

単一のプロトタイプの変異のみ、オブジェクトリテラルに許可されています:すなわち、複数のプロトタイプの変異は構文エラーです。

"colon"表記法を使用しないプロパティ定義はプロトタイプ変異ではありません。: 任意の他の名称を使用する同様の定義と同じように動作するプロパティ定義です。

var __proto__ = "variable";

var obj1 = { __proto__ };
assert(Object.getPrototypeOf(obj1) === Object.prototype);
assert(obj1.hasOwnProperty("__proto__"));
assert(obj1.__proto__ === "variable");

var obj2 = { __proto__() { return "hello"; } };
assert(obj2.__proto__() === "hello");

var obj3 = { ["__prot" + "o__"]: 17 };
assert(obj3.__proto__ === 17);

オブジェクトリテラル表記法 vs JSON

オブジェクトリテラル表記法はJavaScript Object Notation(JSON)と同じではありません。それらは似ていますが、そられの間には違いがあります。:

• JSONは、"property": value構文を使用するプロパティ定義のみ許可します。プロパティ名称は二重引用符で囲まれたでなければなりません。そして、その定義は簡略にすることはできません。
• JSONではその値はstrings、numbers、arrays、true、 false、null、別の(JSON)オブジェクトのみです。
• 関数の値(上記"メソッド"を参照)はJSONでは値を割り当てることができません。
• DateのようなオブジェクトはJSON.parse()の後でstringになります。
• JSON.parse()は計算されたプロパティ名を拒否し、エラーがスローされます。

仕様

ブラウザ実装状況

関連情報

• Property accessors
• get / set
• Method definitions
• Lexical grammar