Objekt-Initialisierer

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

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

• JSON erlaubt nur die Eigenschaftsdefinition mit der Syntax "property": value. Der Eigenschaftsname muss doppelt gequotet sein, und die Definition kann keine Kurzform sein. Berechnete Eigenschaftsnamen sind ebenfalls nicht erlaubt.
• JSON-Objekteigenschaftswerte können nur Zeichenketten, Zahlen, true, false, null, Arrays oder ein anderes JSON-Objekt sein. Das bedeutet, JSON kann keine Methoden oder nicht-plain Objekte wie Map oder RegExp ausdrücken.
• In JSON ist "__proto__" ein normaler Eigenschaftsschlüssel. In einem Objektliteral setzt es das Prototyp-Objekt.

JSON ist ein striktes Teilmengenformat der Objektliteral-Syntax, was bedeutet, dass jeder gültige JSON-Text als Objektliteral analysiert werden kann und wahrscheinlich keine Syntaxfehler verursacht. Die einzige Ausnahme ist, dass die Objektliteral-Syntax doppelte __proto__ Schlüssel verbietet, was nicht für JSON.parse() gilt. Letzteres behandelt __proto__ wie eine normale Eigenschaft und nimmt das letzte Vorkommen als Eigenschaftswert. Die einzige Situation, in der sich der von ihnen dargestellte Objektwert (d.h. ihre Semantik) unterscheidet, ist auch, wenn die Quelle den __proto__ Schlüssel enthält — für Objektliterale setzt dieser das Prototyp-Objekt; für JSON ist es eine normale Eigenschaft.

console.log(JSON.parse('{ "__proto__": 0, "__proto__": 1 }')); // {__proto__: 1}
console.log({ "__proto__": 0, "__proto__": 1 }); // SyntaxError: Duplicate __proto__ fields are not allowed in object literals

console.log(JSON.parse('{ "__proto__": {} }')); // { __proto__: {} }
console.log({ "__proto__": {} }); // {} (with {} as prototype)

Ein leeres Objekt ohne Eigenschaften kann so erstellt werden:

const object = {};

Der Vorteil der Literal- oder Initialisierer-Notation besteht jedoch darin, dass Sie schnell Objekte mit Eigenschaften innerhalb der geschweiften Klammern erstellen können. Sie notieren eine Liste von key: value Paaren, die durch Kommata getrennt sind.

Der folgende Code erstellt ein Objekt mit drei Eigenschaften, wobei die Schlüssel "foo", "age" und "baz" sind. Die Werte dieser Schlüssel sind eine Zeichenkette "bar", die Zahl 42 und ein weiteres Objekt.

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

Sobald Sie ein Objekt erstellt haben, möchten Sie möglicherweise auf dessen Eigenschaften zugreifen oder diese ändern. Auf Objekteigenschaften kann mit der Punktnotation oder der Klammernotation zugegriffen werden. (Siehe Property Accessors für detaillierte Informationen.)

object.foo; // "bar"
object["age"]; // 42
object.baz; // {myProp: 12}
object.baz.myProp; // 12

Wir haben bereits gelernt, wie man Eigenschaften mit der Initialisierer-Syntax notiert. Oftmals gibt es Variablen in Ihrem Code, die Sie in ein Objekt aufnehmen möchten. Sie werden Code wie diesen sehen:

const a = "foo";
const b = 42;
const c = {};

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

Es gibt eine kürzere Notation, um dasselbe zu erreichen:

const a = "foo";
const b = 42;
const c = {};

// Shorthand property names
const o = { a, b, c };

// In other words,
console.log(o.a === { a }.a); // true

Doppelte Eigenschaftsnamen

Wenn Sie denselben Namen für Ihre Eigenschaften verwenden, überschreibt die zweite Eigenschaft die erste.

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

Nach ES2015 sind doppelte Eigenschaftsnamen überall erlaubt, einschließlich strict mode. Sie können auch doppelte Eigenschaftsnamen in Klassen haben. Die einzige Ausnahme sind private Eigenschaften, die eindeutig im Klassenkörper sein müssen.

Eine Eigenschaft eines Objekts kann sich auch auf eine Funktion oder eine Getter oder Setter Methode beziehen.

const o = {
  property: function (parameters) {},
  get property() {},
  set property(value) {},
};

Es gibt eine Kurznotation, sodass das Schlüsselwort function nicht mehr notwendig ist.

// Shorthand method names
const o = {
  property(parameters) {},
};

Es gibt auch eine Möglichkeit, Generator-Methoden kurz und bündig zu definieren.

const o = {
  *generator() {
    // …
  },
};

Diese ist gleichbedeutend mit dieser ES5-ähnlichen Notation (aber beachten Sie, dass ECMAScript 5 keine Generatoren hat):

const o = {
  generator: function* () {
    // …
  },
};

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

Die Objektinitialisierer-Syntax unterstützt auch berechnete Eigenschaftsnamen. Das erlaubt Ihnen, einen Ausdruck in eckige Klammern [] zu setzen, der berechnet und als Eigenschaftsname verwendet wird. Dies erinnert an die Klammernotation der Property Accessor Syntax, die Sie möglicherweise bereits verwendet haben, um auf Eigenschaften zuzugreifen und diese zu setzen.

Jetzt können Sie auch eine ähnliche Syntax in Objektliteralen verwenden:

// Computed property names
let i = 0;
const 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

const items = ["A", "B", "C"];
const obj = {
  [items]: "Hello",
};
console.log(obj); // A,B,C: "Hello"
console.log(obj["A,B,C"]); // "Hello"

const param = "size";
const config = {
  [param]: 12,
  [`mobile${param.charAt(0).toUpperCase()}${param.slice(1)}`]: 4,
};

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

Objektliterale unterstützen die Spread-Syntax. Sie kopiert eigene aufzählbare Eigenschaften von einem bereitgestellten Objekt in ein neues Objekt.

Shallow-Cloning (ohne prototype) oder das Zusammenführen von Objekten ist jetzt mit einer kürzeren Syntax als Object.assign() möglich.

const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const clonedObj = { ...obj1 };
// { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// { foo: "baz", x: 42, y: 13 }

Eine Eigenschaftsdefinition der Form __proto__: value oder "__proto__": value erstellt keine Eigenschaft mit dem Namen __proto__. Stattdessen weist sie, wenn der bereitgestellte Wert ein Objekt oder null ist, das [[Prototype]] des erstellten Objekts auf diesen Wert hin. (Wenn der Wert kein Objekt oder null ist, wird das Objekt nicht verändert.)

Beachten Sie, dass der __proto__ Schlüssel standardisierte Syntax ist, im Gegensatz zu den nicht standardisierten und nicht leistungsfähigen Object.prototype.__proto__ Zugriffen. Es setzt das [[Prototype]] während der Objekterstellung ähnlich wie Object.create — anstatt die Prototypenkette zu verändern.

const obj1 = {};
console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true

const obj2 = { __proto__: null };
console.log(Object.getPrototypeOf(obj2)); // null

const protoObj = {};
const obj3 = { "__proto__": protoObj };
console.log(Object.getPrototypeOf(obj3) === protoObj); // true

const obj4 = { __proto__: "not an object or null" };
console.log(Object.getPrototypeOf(obj4) === Object.prototype); // true
console.log(Object.hasOwn(obj4, "__proto__")); // false

Nur ein einziger Prototype-Setzer ist in einem Objektliteral erlaubt. Mehrere Prototype-Setzer sind ein Syntaxfehler.

Eigenschaftsdefinitionen, die nicht die "Doppelpunkt"-Notation verwenden, sind keine Prototype-Setzer. Sie sind Eigenschaftsdefinitionen, die sich identisch zu ähnlichen Definitionen mit jedem anderen Namen verhalten.

const __proto__ = "variable";

const obj1 = { __proto__ };
console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true
console.log(Object.hasOwn(obj1, "__proto__")); // true
console.log(obj1.__proto__); // "variable"

const obj2 = { __proto__() { return "hello"; } };
console.log(obj2.__proto__()); // "hello"

const obj3 = { ["__proto__"]: 17 };
console.log(obj3.__proto__); // 17

// Mixing prototype setter with normal own properties with "__proto__" key
const obj4 = { ["__proto__"]: 17, __proto__: {} }; // {__proto__: 17} (with {} as prototype)
const obj5 = {
  ["__proto__"]: 17,
  __proto__: {},
  __proto__: null, // SyntaxError: Duplicate __proto__ fields are not allowed in object literals
};
const obj6 = {
  ["__proto__"]: 17,
  ["__proto__"]: "hello",
  __proto__: null,
}; // {__proto__: "hello"} (with null as prototype)
const obj7 =  {
  ["__proto__"]: 17,
  __proto__,
  __proto__: null,
}; // {__proto__: "variable"} (with null as prototype)

• Property Accessors
• get
• set
• Methodendefinitionen
• Lexical Grammar