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

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung InternetNode.js
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1IE Vollständige Unterstützung 1Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Janodejs Vollständige Unterstützung Ja
Computed property namesChrome Vollständige Unterstützung 47Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 34IE Keine Unterstützung NeinOpera Vollständige Unterstützung 34Safari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung 47Chrome Android Vollständige Unterstützung 47Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 34Opera Android Vollständige Unterstützung 34Safari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung Ja
Shorthand property namesChrome Vollständige Unterstützung 47Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 33IE Keine Unterstützung NeinOpera Vollständige Unterstützung 34Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 47Chrome Android Vollständige Unterstützung 47Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 33Opera Android Vollständige Unterstützung 34Safari iOS Vollständige Unterstützung 9Samsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung Ja
Shorthand method namesChrome Vollständige Unterstützung 47Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 34IE Keine Unterstützung NeinOpera Vollständige Unterstützung 34Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 47Chrome Android Vollständige Unterstützung 47Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 34Opera Android Vollständige Unterstützung 34Safari iOS Vollständige Unterstützung 9Samsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung Ja
Spread properties
Experimentell
Chrome Vollständige Unterstützung 60Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 55IE Keine Unterstützung NeinOpera ? Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 60Chrome Android Vollständige Unterstützung 60Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 55Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Neinnodejs Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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