1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: new Operator
slug: Web/JavaScript/Reference/Operators/new
tags:
- JavaScript
- Left-hand-side expressions
- Operator
translation_of: Web/JavaScript/Reference/Operators/new
---
<div>{{jsSidebar("Operators")}}</div>
<p>Der<strong> <code>new</code> Operator</strong> erzeugt eine Instanz eines benutzerdefinierten Objekttyps oder eines Standardtyps, welcher eine Konstruktorfunktion besitzt.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>constructor</code></dt>
<dd>Eine Funktion, welche den Typ der Objektinstanz spezifiziert.</dd>
</dl>
<dl>
<dt><code>arguments</code></dt>
<dd>Eine Liste von Werten, die dem <code>constructor</code> übergeben wird.</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Das erstellen eines benutzerdefinierten Objektes benötigt zwei Schritte:</p>
<ol>
<li>Definieren eines Objekttypen indem eine Funktion geschrieben wird.</li>
<li>Erstellen einer Instanz des Objektes mit <code>new</code>.</li>
</ol>
<p>Um ein neuen Objekttypen zu definieren, erstellt man eine Funktion für den Objekttypen, die seinen Namen und Eigenschaften spezifiziert. Ein Objekt kann Eigenschaften haben, die ebenfalls Objekte sind. Sie dazu das Beispiel unten.</p>
<p>Wenn der Code <code>new <em>Foo</em>(...)</code> ausgeführt wird, passieren folgende Dinge:</p>
<ol>
<li>Ein neues Objekt wird erstellt, welches von <code><em>Foo</em>.prototype</code> erbt.</li>
<li>Die Konstruktorfunktion <code>F<em>oo</em></code> wird mit den spezifizierten Argumenten aufgerufen und <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> wird an das neu erstellte Objekt gebunden. <code>new F<em>oo</em></code> ist gleichbedeutend mit <code>new F<em>oo()</em></code>, d. h. wenn keine Argumentenliste spezifiziert ist, wird <code>F<em>oo</em></code> ohne Argumente aufgerufen.</li>
<li>Das Objekt, welches von der Konstruktorfunktion zurückgegeben wird, ist das Resultat des ganzen <code>new</code> Ausdrucks. Wenn die Konstruktorfunktion nicht explizit ein Objekt zurück gibt, wird stattdessen das erstellte Objekt aus Schritt 1 zurückgegeben. (Normalerweise geben Konstruktoren keinen Wert zurück, aber sie können es tun, um den normalen Objekterstellungsprozess zu überschreiben.)</li>
</ol>
<p>Man kann immer eine Eigenschaft zu dem vorher erstellten Objekt hinzufügen. Zum Beispiel fügt das Statement <code>auto1.farbe = "schwarz"</code> die Eigenschaft <code>farbe</code> zu <code>auto1</code> hinzu und weist dieser den Wert <code>"schwarz"</code> zu. Jedoch hat das keinen Effekt auf andere Objekte. Um die Eigenschaft zu allen Objekten des selben Typs hinzuzufügen, muss die Eigenschaft dem <code>Auto</code> Objekttypen hinzugefügt werden.</p>
<p>Man kann eine geteilte Eigenschaft zum vorher definierten Objekttypen hinzufügen, indem die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> Eigenschaft genutzt wird. Diese definiert eine geteilte Eigenschaft mit allen Objekten, die mit der gleichen Funktion erstellt wurde, und nicht nur bei einer Instanz des Objekttypen. Der folgende Code fügt die <code>farbe</code> Eigenschaft mit dem Wert <code>"originale Farbe"</code> zu allen Objekten des Typs <code>Auto</code> hinzu und überschreibt diesen Wert mit dem String <code>"schwarz"</code> nur in dem Instanzobjekt <code>auto1</code>. Für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Prototype</a>.</p>
<pre class="brush: js">function Auto() {}
auto1 = new Auto();
auto2 = new Auto();
console.log(auto1.farbe); // undefined
Auto.prototype.farbe = "originale Farbe";
console.log(auto1.farbe); // originale Farbe
auto1.farbe = "schwarz";
console.log(auto1.farbe); // schwarz
console.log(auto1.__proto__.farbe); // originale Farbe
console.log(auto2.__proto__.farbe); // originale Farbe
console.log(auto1.farbe); // schwarz
console.log(auto2.farbe); // originale Farbe
</pre>
<div class="note">
<p>Wenn man den <code>new</code> Operator nicht benutzt, <strong>wird die Konstruktorfunktion wie eine normale Funktion ausgeführt,</strong> <em>ohne ein Objekt zu erstellen</em>. In diesem Fall ist der Wert von <code>this</code> ebenfalls anders.</p>
</div>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Objekttyp_und_Objektinstanz">Objekttyp und Objektinstanz</h3>
<p>Angenommen man möchte ein Objekttypen für Autos erstellen, man möchte den Objekttypen <code>Auto</code> nennen und man möchte Eigenschaften für die Marke, das Modell und das Jahr haben. Um das zu erreichen muss folgende Funktion geschrieben werden:</p>
<pre class="brush: js">function Auto(marke, modell, jahr) {
this.marke = marke;
this.modell = modell;
this.jahr = jahr;
}
</pre>
<p>Nun kann man ein Objekt mit dem Namen <code>meinAuto</code> wie folgt erstellen:</p>
<pre class="brush: js">var meinAuto = new Auto("Eagle", "Talon TSi", 1993);
</pre>
<p>Dieses Statement erstellt <code>meinAuto</code> und wiest die spezifizierten Werte den Eigenschaften zu. Dann ist der Wert von <code>meinAuto.marke</code> der String "Eagle", von <code>meinAuto.jahr</code> die Zahl 1993 und so weiter.</p>
<p>Man kann beliebig viele Objekte von <code>Auto</code> mit <code>new</code> erstellen. Zum Beispiel:</p>
<pre class="brush: js">var kensAuto = new Auto("Nissan", "300ZX", 1992);
</pre>
<h3 id="Objekteigenschaft_die_selber_ein_Objket">Objekteigenschaft, die selber ein Objket</h3>
<p>Angenommen man Definiert ein Objekt mit dem Namen <code>Person</code> wie folgt:</p>
<pre class="brush: js">function Person(name, alter, geschlecht) {
this.name = name;
this.alter = alter;
this.geschlecht = geschlecht;
}
</pre>
<p>Dann instantiiert man zwei neue <code>Person</code> Objekte wie folgt:</p>
<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
</pre>
<p>Dann erneuert man die Definition von <code>Auto</code> um eine <code>besitzer</code> Eigenschaft , die ein <code>Person</code> Objekt ist, wie folgt:</p>
<pre class="brush: js">function Auto(marke, modell, jahr, <code>besitzer</code>) {
this.marke = marke;
this.modell = modell;
this.jahr = jahr;
this.<code>besitzer = besitzer;</code>
}
</pre>
<p>Um das neue Objekt zu instantiiert benutzt man dann folgendes:</p>
<pre class="brush: js">var auto1 = new Auto("Eagle", "Talon TSi", 1993, rand);
var auto2 = new Auto("Nissan", "300ZX", 1992, ken);
</pre>
<p>Statt ein Stringliteral oder einen Zahlenwert beim erstellen zu benutzen, übergibt das obere Beispiel die Objekte <code>rand</code> und <code>ken</code> als Parameter für den Besitzer. Um den Namen des Besitzers von <code>auto2</code> zu erfahren, muss man die Eigenschaft wie folgt abfragen:</p>
<pre class="brush: js">auto2.besitzer.name
</pre>
<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('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES3')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.operators.new")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Reflect.construct()")}}</li>
</ul>
|
