new
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der new
Operator ermöglicht es Entwicklern, eine Instanz eines benutzerdefinierten Objekttyps oder eines der eingebauten Objekttypen, die über eine Konstruktorfunktion verfügen, zu erstellen.
Probieren Sie es aus
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const car1 = new Car("Eagle", "Talon TSi", 1993);
console.log(car1.make);
// Expected output: "Eagle"
Syntax
new constructor
new constructor()
new constructor(arg1)
new constructor(arg1, arg2)
new constructor(arg1, arg2, /* …, */ argN)
Parameter
constructor
-
Eine Klasse oder Funktion, die den Typ der Objektinstanz angibt. Der Ausdruck kann alles mit ausreichender Operatorrangfolge sein, einschließlich eines Bezeichners, eines Property-Zugriffs oder eines anderen
new
Ausdrucks, aber optionale Verkettung ist nicht erlaubt. arg1
,arg2
, …,argN
-
Eine Liste von Werten, mit denen der
constructor
aufgerufen wird.new Foo
ist äquivalent zunew Foo()
, d.h., wenn keine Argumentliste angegeben ist, wirdFoo
ohne Argumente aufgerufen.
Beschreibung
Wenn eine Funktion mit dem new
Schlüsselwort aufgerufen wird, wird die Funktion als Konstruktor verwendet. new
führt die folgenden Schritte aus:
-
Es wird ein leeres, einfaches JavaScript-Objekt erstellt. Dieses nennen wir der Einfachheit halber
newInstance
. -
Der [[Prototype]] von
newInstance
wird auf dieprototype
-Eigenschaft der Konstruktorfunktion gesetzt, fallsprototype
einObject
ist. Andernfalls bleibtnewInstance
ein einfaches Objekt mitObject.prototype
als seinem [[Prototype]].Hinweis: Eigenschaften/Objekte, die zur
prototype
-Eigenschaft der Konstruktorfunktion hinzugefügt werden, sind daher für alle Instanzen zugänglich, die von der Konstruktorfunktion erstellt werden. -
Die Konstruktorfunktion wird mit den angegebenen Argumenten ausgeführt, wobei
newInstance
alsthis
-Kontext gebunden wird (d.h. alle Verweise aufthis
in der Konstruktorfunktion beziehen sich jetzt aufnewInstance
). -
Falls die Konstruktorfunktion einen Nicht-Primitiven Wert zurückgibt, wird dieser Rückgabewert das Ergebnis des gesamten
new
Ausdrucks. Gibt die Konstruktorfunktion nichts zurück oder einen primitiven Wert, wirdnewInstance
stattdessen zurückgegeben. (Normalerweise geben Konstruktoren keinen Wert zurück, können dies aber tun, um den normalen Objekt-Erstellungsprozess zu überschreiben.)
Klassen können nur mit dem new
Operator instanziiert werden – der Versuch, eine Klasse ohne new
aufzurufen, führt zu einem TypeError
.
Das Erstellen eines Objekts mit einer benutzerdefinierten Konstruktorfunktion erfordert zwei Schritte:
-
Definieren Sie den Objekttyp, indem Sie eine Funktion schreiben, die ihren Namen und ihre Eigenschaften angibt. Zum Beispiel könnte eine Konstruktorfunktion zur Erstellung eines
Foo
-Objekts so aussehen:jsfunction Foo(bar1, bar2) { this.bar1 = bar1; this.bar2 = bar2; }
-
Erstellen Sie eine Instanz des Objekts mit
new
.jsconst myFoo = new Foo("Bar 1", 2021);
Hinweis: Ein Objekt kann eine Eigenschaft haben, die selbst ein weiteres Objekt ist. Siehe die folgenden Beispiele.
Man kann immer eine Eigenschaft zu einer zuvor definierten Objektinstanz hinzufügen. Zum Beispiel fügt die Anweisung car1.color = "black"
die Eigenschaft color
zu car1
hinzu und weist dieser den Wert "black"
zu.
Dies betrifft jedoch keine anderen Objekte. Um die neue Eigenschaft zu allen Objekten desselben Typs hinzuzufügen, muss die Eigenschaft zur prototype
-Eigenschaft des Konstruktors hinzugefügt werden. Dies definiert eine Eigenschaft, die allen Objekten gemeinsam ist, die mit dieser Funktion erstellt wurden, anstatt nur einer Instanz dieses Objekttyps. Der folgende Code fügt eine color
-Eigenschaft mit dem Wert "original color"
zu allen Objekten des Typs Car
hinzu und überschreibt diesen Wert dann mit dem String "black"
nur in der Instanz car1
. Weitere Informationen finden Sie unter Prototyp.
function Car() {}
const car1 = new Car();
const car2 = new Car();
console.log(car1.color); // undefined
Car.prototype.color = "original color";
console.log(car1.color); // 'original color'
car1.color = "black";
console.log(car1.color); // 'black'
console.log(Object.getPrototypeOf(car1).color); // 'original color'
console.log(Object.getPrototypeOf(car2).color); // 'original color'
console.log(car1.color); // 'black'
console.log(car2.color); // 'original color'
Hinweis:
Auch wenn die Konstruktorfunktion wie jede reguläre Funktion (d. h. ohne den new
-Operator) aufgerufen werden kann,
wird in diesem Fall kein neues Objekt erstellt und der Wert von this
ist ebenfalls anders.
Eine Funktion kann erkennen, ob sie mit new
aufgerufen wurde, indem sie new.target
überprüft. new.target
ist nur undefined
, wenn die Funktion ohne new
aufgerufen wird. Zum Beispiel kann eine Funktion unterschiedlich reagieren, je nachdem, ob sie aufgerufen oder als Konstrukt verwendet wird:
function Car(color) {
if (!new.target) {
// Called as function.
return `${color} car`;
}
// Called with new.
this.color = color;
}
const a = Car("red"); // a is "red car"
const b = new Car("red"); // b is `Car { color: "red" }`
Vor ES6, das Klassen einführte, waren die meisten JavaScript-Built-ins sowohl aufrufbar als auch konstruktierbar, obwohl viele von ihnen unterschiedliche Verhaltensweisen zeigten. Einige Beispiele:
Array()
,Error()
undFunction()
verhalten sich gleich, wenn sie als Funktion oder als Konstruktor aufgerufen werden.Boolean()
,Number()
undString()
wandeln ihr Argument in den jeweiligen primitiven Typ um, wenn sie aufgerufen werden, und geben Wrapper-Objekte zurück, wenn sie konstruiert werden.Date()
gibt einen String zurück, der das aktuelle Datum darstellt, wenn es aufgerufen wird, wasnew Date().toString()
entspricht.
Nach ES6 ist die Sprache strenger darin geworden, welche Konstruktoren und welche Funktionen sind. Zum Beispiel:
Beispiele
Objekttyp und Objektinstanz
Angenommen, Sie möchten einen Objekttyp für Autos erstellen. Dieser Objekttyp soll Car
heißen und soll Eigenschaften für Marke, Modell und Jahr haben.
Um dies zu tun, würden Sie folgende Funktion schreiben:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
Nun können Sie ein Objekt namens myCar
wie folgt erstellen:
const myCar = new Car("Eagle", "Talon TSi", 1993);
Dieser Ausdruck erstellt myCar
und weist ihm die angegebenen Werte für seine Eigenschaften zu. Der Wert von myCar.make
ist dann der String "Eagle",
myCar.year
ist die Ganzzahl 1993 und so weiter.
Sie können beliebig viele car
-Objekte durch Aufrufe von new
erstellen. Zum Beispiel:
const kensCar = new Car("Nissan", "300ZX", 1992);
Objekteigenschaft, die selbst ein weiteres Objekt ist
Angenommen, Sie definieren ein Objekt namens Person
wie folgt:
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Und erstellen dann zwei neue Person
-Objekte wie folgt:
const rand = new Person("Rand McNally", 33, "M");
const ken = new Person("Ken Jones", 39, "M");
Dann können Sie die Definition von Car
um eine owner
-Eigenschaft erweitern, die ein Person
-Objekt annimmt, wie folgt:
function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
}
Um die neuen Objekte zu instanziieren, verwenden Sie dann Folgendes:
const car1 = new Car("Eagle", "Talon TSi", 1993, rand);
const car2 = new Car("Nissan", "300ZX", 1992, ken);
Anstatt bei der Erstellung der neuen Objekte einen literal String- oder Integer-Wert zu übergeben, übergeben die obigen Anweisungen die Objekte rand
und ken
als Parameter für die Besitzer. Um den Namen des Besitzers von car2
herauszufinden, können Sie die folgende Eigenschaft aufrufen:
car2.owner.name;
Verwendung von new
mit Klassen
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const p = new Person("Caroline");
p.greet(); // Hello, my name is Caroline
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # sec-new-operator |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
new |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support