Der new Operator erzeugt eine Instanz eines benutzerdefinierten Objekttyps oder eines Standardtyps, welcher eine Konstruktorfunktion besitzt.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
new constructor[([arguments])]
Parameter
constructor- Eine Funktion, welche den Typ der Objektinstanz spezifiziert.
arguments- Eine Liste von Werten, die dem
constructorübergeben wird.
Beschreibung
Das erstellen eines benutzerdefinierten Objektes benötigt zwei Schritte:
- Definieren eines Objekttypen indem eine Funktion geschrieben wird.
- Erstellen einer Instanz des Objektes mit
new.
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.
Wenn der Code new Foo(...) ausgeführt wird, passieren folgende Dinge:
- Ein neues Objekt wird erstellt, welches von
Foo.prototypeerbt. - Die Konstruktorfunktion
Foowird mit den spezifizierten Argumenten aufgerufen undthiswird an das neu erstellte Objekt gebunden.new Fooist gleichbedeutend mitnew Foo(), d. h. wenn keine Argumentenliste spezifiziert ist, wirdFooohne Argumente aufgerufen. - Das Objekt, welches von der Konstruktorfunktion zurückgegeben wird, ist das Resultat des ganzen
newAusdrucks. 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.)
Man kann immer eine Eigenschaft zu dem vorher erstellten Objekt hinzufügen. Zum Beispiel fügt das Statement auto1.farbe = "schwarz" die Eigenschaft farbe zu auto1 hinzu und weist dieser den Wert "schwarz" zu. Jedoch hat das keinen Effekt auf andere Objekte. Um die Eigenschaft zu allen Objekten des selben Typs hinzuzufügen, muss die Eigenschaft dem Auto Objekttypen hinzugefügt werden.
Man kann eine geteilte Eigenschaft zum vorher definierten Objekttypen hinzufügen, indem die Function.prototype 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 farbe Eigenschaft mit dem Wert "originale Farbe" zu allen Objekten des Typs Auto hinzu und überschreibt diesen Wert mit dem String "schwarz" nur in dem Instanzobjekt auto1. Für weitere Informationen siehe Prototype.
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
Wenn man den new Operator nicht benutzt, wird die Konstruktorfunktion wie eine normale Funktion ausgeführt, ohne ein Objekt zu erstellen. In diesem Fall ist der Wert von this ebenfalls anders.
Beispiele
Objekttyp und Objektinstanz
Angenommen man möchte ein Objekttypen für Autos erstellen, man möchte den Objekttypen Auto 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:
function Auto(marke, modell, jahr) {
this.marke = marke;
this.modell = modell;
this.jahr = jahr;
}
Nun kann man ein Objekt mit dem Namen meinAuto wie folgt erstellen:
var meinAuto = new Auto("Eagle", "Talon TSi", 1993);
Dieses Statement erstellt meinAuto und wiest die spezifizierten Werte den Eigenschaften zu. Dann ist der Wert von meinAuto.marke der String "Eagle", von meinAuto.jahr die Zahl 1993 und so weiter.
Man kann beliebig viele Objekte von Auto mit new erstellen. Zum Beispiel:
var kensAuto = new Auto("Nissan", "300ZX", 1992);
Objekteigenschaft, die selber ein Objket
Angenommen man Definiert ein Objekt mit dem Namen Person wie folgt:
function Person(name, alter, geschlecht) {
this.name = name;
this.alter = alter;
this.geschlecht = geschlecht;
}
Dann instantiiert man zwei neue Person Objekte wie folgt:
var rand = new Person("Rand McNally", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
Dann erneuert man die Definition von Auto um eine besitzer Eigenschaft , die ein Person Objekt ist, wie folgt:
function Auto(marke, modell, jahr,besitzer) { this.marke = marke; this.modell = modell; this.jahr = jahr; this.besitzer = besitzer;}
Um das neue Objekt zu instantiiert benutzt man dann folgendes:
var auto1 = new Auto("Eagle", "Talon TSi", 1993, rand);
var auto2 = new Auto("Nissan", "300ZX", 1992, ken);
Statt ein Stringliteral oder einen Zahlenwert beim erstellen zu benutzen, übergibt das obere Beispiel die Objekte rand und ken als Parameter für den Besitzer. Um den Namen des Besitzers von auto2 zu erfahren, muss man die Eigenschaft wie folgt abfragen:
auto2.besitzer.name
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| ECMAScript (ECMA-262) Die Definition von 'The new Operator' in dieser Spezifikation. |
Lebender Standard | |
| ECMAScript 2015 (6th Edition, ECMA-262) Die Definition von 'The new Operator' in dieser Spezifikation. |
Standard | |
| ECMAScript 5.1 (ECMA-262) Die Definition von 'The new Operator' in dieser Spezifikation. |
Standard | |
| ECMAScript 3rd Edition (ECMA-262) Die Definition von 'The new Operator' in dieser Spezifikation. |
Standard | |
| ECMAScript 1st Edition (ECMA-262) Die Definition von 'The new Operator' in dieser Spezifikation. |
Standard | Initiale Definition. Implementiert in JavaScript 1.0. |
Browserkompatibilität
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
new | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 3 | Opera Vollständige Unterstützung 3 | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung 1 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 10.1 | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android Vollständige Unterstützung 1.0 | nodejs Vollständige Unterstützung 0.1.100 |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung