Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

Syntax

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) {},
};

Neue Schreibweisen in ECMAScript 2015

Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

// Kurzschreibweise Methoden Namen (ES2015)
var o = {
  property([parameters]) {}
};

// Berechnete Eigenschaftsnamen (ES2015)
var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there",
};

Beschreibung

Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines Object beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können primitive Datentypen oder andere Objekte enthalten.

Objekte erzeugen

Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

var object = {};

Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz"Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

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

Auf Eigenschaften zugreifen

Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

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

object.foo = "baz";

Eigenschaften definieren

Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden:

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

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

Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

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

// Kurzschreibweise für Eigenschaftsnamen in ES2015
var o = { a, b, c };

// In anderen Worten
console.log(); // true

Doppelte Eigenschaftsnamen

Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

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

Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als SyntaxError gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

function haveES2015DuplicatePropertySemantics(){
  "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;
  }
}

Methoden Definitionen

Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

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

In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

// Kurzschreibweise für Methoden Namen (ES2015)
var o = {
  property([parameters]) {},
  * generator() {}
};

In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

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

Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

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

Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

Berechnete Bezeichnernamen

Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

// Computed property names (ES2015)
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 }

Spread Eigenschaften

Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als Object.assign() möglich.

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: 'bar', x: 42 };

var mergeObj = { ...obj1, ...obj2 };
// Object { foo: 'bar', x: 42, y: 13 }

Zu beachten ist, dass Object.assign() Setters benutzt, was der Spread Operator nicht macht.

Prototypmutationen

Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

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__"));

Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

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);

Objektliteral-Notation vs JSON

Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

  • JSON erlaubt nur Eigenschaftsdefinitionen mit "Eigenschaft": Wert Syntax. Der Eigenschaftsname muss in doppelten Anführungszeichen geschrieben werden, und die Definition kann nicht in Kurzschreibweise erfolgen.
  • In JSON können die Werte nur Strings, Zahlen, Arrays, true, false, null oder  andere (JSON) Objekte sein.
  • Ein Funktionswert (siehe "Methoden" oben) kann in JSON keinem Wert zugeordnet werden.
  • Objekte wie {{jsxref ("Date")}} werden nach dem Aufruf von {{jsxref ("JSON.parse()")}}, in einen String umgewandelt, .
  • JSON.parse() weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 1st Edition (ECMA-262) Standard Initiale Definition.
ECMAScript 5.1 (ECMA-262)
Die Definition von 'Object Initializer' in dieser Spezifikation.
Standard Getter und Setter hinzugefügt.
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Object Initializer' in dieser Spezifikation.
Standard Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
ECMAScript Latest Draft (ECMA-262)
Die Definition von 'Object Initializer' in dieser Spezifikation.
Entwurf  
Rest/Spread Properties for ECMAScript Entwurf Stage 4 (Fertig).

Browserkompatibilität

FunktionChromeEdgeFirefoxInternet ExplorerOperaSafari
Grundlegende Unterstützung1 Ja11 Ja1
Computed property names47 Ja34 Nein348
Shorthand property names47 Ja33 Nein349
Shorthand method names47 Ja34 Nein349
Spread properties60 Nein55 Nein ? Nein
FunktionAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Grundlegende Unterstützung118 Ja4 Ja1 Ja
Computed property names4747 Ja343485.0
Shorthand property names4747 Ja333495.0
Shorthand method names4747 Ja343495.0
Spread properties6060 Nein55 ? Nein Nein

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fmeyertoens, schlagi123, JohannesDienst, nnmrts, kdex, siggi-heltau
Zuletzt aktualisiert von: fmeyertoens,