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 integrierten Objekttypen zu erstellen, die eine Konstruktorfunktion besitzen.
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 Priorität sein, einschließlich eines Identifikators, eines Eigenschaftszugriffs oder eines weiteren
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 Argumentenliste angegeben wird, 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:
-
Erstellt ein leeres, einfaches JavaScript-Objekt. Der Einfachheit halber nennen wir es
newInstance
. -
Setzt
newInstance
's [[Prototype]] auf dieprototype
-Eigenschaft der Konstruktorfunktion, falls dasprototype
einObject
ist. Andernfalls bleibtnewInstance
ein einfaches Objekt mitObject.prototype
als seinem [[Prototype]].Hinweis: Eigenschaften/Objekte, die der
prototype
-Eigenschaft der Konstruktorfunktion hinzugefügt werden, sind daher für alle Instanzen zugänglich, die aus der Konstruktorfunktion erstellt wurden. -
Führt die Konstruktorfunktion mit den gegebenen Argumenten aus und bindet
newInstance
alsthis
Kontext (d.h. alle Verweise aufthis
in der Konstruktorfunktion beziehen sich jetzt aufnewInstance
). -
Wenn die Konstruktorfunktion einen nicht-primitiven Wert zurückgibt, wird dieser Rückgabewert das Ergebnis des gesamten
new
Ausdrucks. Andernfalls, wenn die Konstruktorfunktion nichts zurückgibt oder einen primitiven Wert zurückgibt, wirdnewInstance
stattdessen zurückgegeben. (Normalerweise geben Konstruktoren keinen Wert zurück, aber sie können dies 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:
-
Den Objekttyp definieren, indem eine Funktion geschrieben wird, die seinen Namen und seine Eigenschaften angibt. Zum Beispiel könnte eine Konstruktorfunktion, um ein Objekt
Foo
zu erstellen, folgendermaßen aussehen:jsfunction Foo(bar1, bar2) { this.bar1 = bar1; this.bar2 = bar2; }
-
Eine Instanz des Objekts mit
new
erstellen.jsconst myFoo = new Foo("Bar 1", 2021);
Hinweis: Ein Objekt kann eine Eigenschaft haben, die selbst ein anderes Objekt ist. Siehe die Beispiele unten.
Sie können einem zuvor definierten Objekt immer eine Eigenschaft hinzufügen. Zum Beispiel fügt die Anweisung car1.color = "black"
eine Eigenschaft color
zu car1
hinzu und weist ihr den Wert "black"
zu.
Dies beeinflusst jedoch keine anderen Objekte. Um die neue Eigenschaft zu allen Objekten des gleichen Typs hinzuzufügen, müssen Sie die Eigenschaft zur prototype
-Eigenschaft des Konstruktors hinzufügen. Dies definiert eine Eigenschaft, die von allen mit dieser Funktion erstellten Objekten geteilt wird, anstatt nur von einer Instanz des Objekttyps. Der folgende Code fügt eine color
Eigenschaft mit dem Wert "original color"
zu allen Objekten des Typs Car
hinzu und überschreibt dann diesen Wert nur im Instanzobjekt car1
mit dem String "black"
. Für weitere Informationen siehe prototype.
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:
Während die Konstruktorfunktion wie jede andere Funktion aufgerufen werden kann (d.h. ohne den new
Operator),
wird in diesem Fall kein neues Objekt erstellt und der Wert von this
ist ebenfalls unterschiedlich.
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 können Sie eine Funktion haben, die sich unterschiedlich verhält, je nachdem, ob sie aufgerufen oder konstruiert 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 eingeführt hat, sind die meisten JavaScript-Built-ins sowohl aufrufbar als auch konstruierbar, obwohl viele von ihnen unterschiedliche Verhaltensweisen zeigen. Einige Beispiele:
Array()
,Error()
, undFunction()
verhalten sich gleich, wenn sie als Funktion oder als Konstruktor aufgerufen werden.Boolean()
,Number()
, undString()
zwingen ihr Argument in den jeweiligen primitiven Typ, 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 er aufgerufen wird, äquivalent zunew Date().toString()
.
Nach ES6 ist die Sprache strenger darüber, welche Konstruktoren und welche Funktionen sind. Zum Beispiel:
Beispiele
Objekttyp und Objektinstanz
Angenommen, Sie möchten einen Objekttyp für Autos erstellen. Sie möchten, dass dieser Objekttyp
Car
genannt wird, und er soll Eigenschaften für Marke, Modell und Jahr haben.
Um dies zu tun, würden Sie die 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);
Diese Anweisung erstellt myCar
und weist ihm die angegebenen Werte für seine
Eigenschaften zu. Dann ist der Wert von myCar.make
der String "Eagle",
myCar.year
ist der Integer 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 instanziieren 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 übernimmt, 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);
Anstelle eines literalen Strings oder Integer-Werts bei der Erstellung der neuen Objekte übergeben die
obigen Anweisungen die Objekte rand
und ken
als
Parameter für die Eigentümer. Um den Namen des Eigentümers von car2
herauszufinden, können Sie auf die folgende Eigenschaft zugreifen:
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® 2026 Language Specification # sec-new-operator |