path: root/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html

---
title: Objekt Initialisierer
slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer
tags:
  - ECMAScript 2015
  - JSON
  - JavaScript
  - Literal
  - Methods
  - Object
  - Primary Expression
  - computed
  - mutation
  - properties
translation_of: Web/JavaScript/Reference/Operators/Object_initializer
---
<div>{{JsSidebar("Operators")}}</div>

<p>Objekte können mit <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">new Object()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a>, oder mit der <em>literal</em> Notation (<em>Initialisierungs</em> 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 (<code>{}</code>).</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div>



<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush: js">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 = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
};
</pre>

<h3 id="Neue_Schreibweisen_in_ECMAScript_2015">Neue Schreibweisen in ECMAScript 2015</h3>

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

<pre class="brush: js">// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

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

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

<h2 id="Description" name="Description">Beschreibung</h2>

<p>Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.</p>

<h3 id="Objekte_erzeugen">Objekte erzeugen</h3>

<p>Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:</p>

<pre class="brush: js">var object = {};</pre>

<p>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 <code>"foo"</code>, <code>"age"</code> und <code>"baz"</code>. <span id="result_box" lang="de"><span class="hps">Die Werte dieser</span> <span class="hps">Schlüssel</span> <span class="hps">sind: die Zeichenkette</span> <code><span class="hps">"bar"</span></code><span>,</span> <span class="hps">die Zahl</span> <code><span class="hps">42</span></code> <span class="hps">und die dritte</span> <span class="hps">Eigenschaft hat</span> <span class="hps">ein anderes Objekt</span> <span class="hps">als Wert.</span></span></p>

<pre class="brush: js">var object = {
  foo: "bar",
  age: 42,
  baz: { myProp: 12 },
}</pre>

<h3 id="Auf_Eigenschaften_zugreifen">Auf Eigenschaften zugreifen</h3>

<p>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 <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a> für weiter Informationen.</p>

<pre class="brush: js">object.foo; // "bar"
object["age"]; // 42

object.foo = "baz";
</pre>

<h3 id="Eigenschaften_definieren">Eigenschaften definieren</h3>

<p><span id="result_box" lang="de"><span class="hps">Wir haben bereits</span> <span class="hps">gelernt, wie man</span> <span class="hps">Eigenschaften mit Hilfe der</span> <span class="hps">Initialisierungs</span> <span class="hps">Syntax</span> <span class="hps">schreibt</span><span>.</span> <span class="hps">Oft</span> <span class="hps">gibt es Variablen</span> <span class="hps">im </span><span class="hps">Code, die</span> <span class="hps">Sie in einem Objekt verwenden möchten</span><span>.</span> Man sieht oft Quellcode wie den folgenden: </span></p>

<pre class="brush: js">var a = "foo",
    b = 42,
    c = {};

var o = {
  a: a,
  b: b,
  c: c
};</pre>

<p><span id="result_box" lang="de"><span class="hps">Mit</span> <span class="hps">ECMAScript</span> 2015 ist <span class="hps">eine</span> <span class="hps">kürzere</span> <span class="hps">Schreibweise</span> <span class="hps">verfügbar, um das</span> G<span class="hps">leiche zu erreichen</span><span>:</span></span></p>

<pre class="brush: js">var a = "foo",
    b = 42,
    c = {};

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

// In anderen Worten
console.log(); // true</pre>

<h4 id="Doppelte_Eigenschaftsnamen">Doppelte Eigenschaftsnamen</h4>

<p><span id="result_box" lang="de"><span class="hps">Bei Verwendung des</span> <span class="hps">gleichen Namens</span> <span class="hps">für Ihre</span> <span class="hps">Eigenschaften</span><span>, wird die</span> <span class="hps">zweite Eigenschaft</span> <span class="hps">die erste</span> <span class="hps">überschreiben.</span></span></p>

<pre class="brush: js">var a = {x: 1, x: 2};
console.log(a); // { x: 2}
</pre>

<p>Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.</p>

<pre class="brush: js">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;
  }
}</pre>

<h3 id="Methoden_Definitionen">Methoden Definitionen</h3>

<p><span id="result_box" lang="de"><span class="hps">Eine</span> <span class="hps">Eigenschaft eines Objekts</span> <span class="hps">kann auch</span> <span class="hps">auf eine <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktion</a></span> <span class="hps">oder</span> <span class="hps">einen</span> <a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> <span class="hps">oder</span> <span class="hps"><a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a>-Methode</span> <span class="hps">verweisen</span></span>.</p>

<pre class="brush: js">var o = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
};</pre>

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

<pre class="brush: js">// Kurzschreibweise für Methoden Namen (ES2015)
var o = {
  <var>property</var>([<var>parameters</var>]) {},
  * <var>generator</var>() {}
};</pre>

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

<pre class="brush: js">var o = {
  *generator() {
    ........
  }
};</pre>

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

<pre class="brush: js">var o = {
  generator = function* () {
    ........
  }
}</pre>

<p>Für weitere Informationen und Beispiele zu Methoden, siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a>.</p>

<h3 id="Berechnete_Bezeichnernamen">Berechnete Bezeichnernamen</h3>

<p>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 <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Objekt Eigenschaften</a> welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:</p>

<pre class="brush: js">// 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 }</pre>

<h3 id="Spread_Eigenschaften">Spread Eigenschaften</h3>

<p>Die Vorschlag von <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaft für ECMAScript</a> (Stage 4) fügt <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread</a> Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.</p>

<p>Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.</p>

<pre class="brush: js">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: 'baz', x: 42, y: 13 }</pre>

<p>Zu beachten ist, dass {{jsxref("Object.assign()")}} <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setters</a> benutzt, was der Spread Operator nicht macht.</p>

<h3 id="Prototypmutationen">Prototypmutationen</h3>

<p>Eine Eigenschaft Definition der Form <code>__proto__: Wert</code> oder <code>"__proto__": Wert</code> erzeugt keine Eigenschaft mit dem Namen <code>__proto__</code>. Wenn der angegebene Wert ein Objekt oder <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> ist, wird stattdessen der <code>[[Prototyp]]</code> des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)</p>

<pre class="brush: js">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__"));
</pre>

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

<p>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.</p>

<pre class="brush: js">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);
</pre>

<h2 id="Objektliteral-Notation_vs_JSON">Objektliteral-Notation vs JSON</h2>

<p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">Objekt-Literal</span> <span class="hps">Notation ist</span> <span class="hps">nicht dasselbe wie</span> <span class="hps">die</span> <span class="hps">JavaScript Object Notation</span> <span class="atn hps">(</span><span><a href="/de/docs/Glossary/JSON">JSON</a>)</span><span>.</span> <span class="hps">Obwohl</span> <span class="hps">sie ähnlich aussehen</span><span>, gibt es</span> <span class="hps">Unterschiede zwischen ihnen</span></span>:</p>

<ul>
 <li><span id="result_box" lang="de"><span class="hps">JSON</span> <span class="hps">erlaubt</span> <span class="hps">nur</span> <span class="hps">Eigenschaftsdefinition</span>en <span class="hps">mit</span> <code><span class="hps">"Eigenschaft"</span><span>:</span> <span class="hps">Wert</span></code> <span class="hps">Syntax.</span> <span class="hps">Der Eigenschaftsname</span> <span class="hps">muss</span> <span class="hps">in doppelten Anführungszeichen geschrieben werden</span><span>, und die</span> <span class="hps">Definition kann nicht</span> in Kurzschreibweise erfolgen</span>.</li>
 <li><span id="result_box" lang="de"><span class="hps">In</span> <span class="hps">JSON</span> <span class="hps">können die Werte</span> <span class="hps">nur</span> <span class="hps">Strings, Zahlen</span><span>, Arrays,</span> <span class="hps"><code>true</code>, <code>false</code></span><span>, <code>null</code></span> <span class="hps">oder  andere</span> <span class="atn hps">(</span><span>JSON)</span> <span class="hps">Objekte sein</span></span>.</li>
 <li><span id="result_box" lang="de"><span class="hps">Ein</span> <span class="hps">Funktionswert</span> <span class="hps">(siehe</span> <span class="hps">"Methoden"</span> <span class="hps">oben)</span> <span class="hps">kann in JSON keinem Wert zugeordnet werden.</span></span></li>
 <li><span id="result_box" lang="de"><span class="hps">Objekte</span> <span class="atn hps">wie {</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"Date</span><span>")</span><span>}}</span> <span class="hps">werden</span> </span><span id="result_box" lang="de"><span>nach dem Aufruf von</span> <span class="atn hps">{</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>JSON.parse</span><span class="hps">()")</span><span>}}</span></span><span id="result_box" lang="de">, in <span class="hps">einen String</span> <span class="hps">umgewandelt</span><span>, </span><span>.</span></span></li>
 <li>{{jsxref("JSON.parse()")}} weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.</li>
</ul>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initiale Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td><a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> und <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a> hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td>
   <td>Entwurf</td>
   <td>Stage 4 (Fertig).</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>


<p>{{Compat("javascript.operators.object_initializer")}}</p>
</div>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a></li>
 <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
 <li><a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a></li>
 <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li>
</ul>