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 Entwicklern das Erstellen einer Instanz eines benutzerdefinierten Objekttyps oder eines der eingebauten Objekttypen, die eine Konstruktormethode haben.
Probieren Sie es aus
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 sein, was über ausreichende Präzedenz verfügt, einschließlich einer Identifizierung, eines Eigenschaftszugriffs oder eines anderen
new
Ausdrucks, aber optional chaining 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 Schlüsselwort new
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 das [[Prototype]] von
newInstance
auf dieprototype
Eigenschaft der Konstruktormethode, falls dasprototype
einObject
ist. Andernfalls bleibtnewInstance
ein einfaches Objekt mitObject.prototype
als [[Prototype]].Hinweis: Eigenschaften/Objekte, die der
prototype
Eigenschaft der Konstruktormethode hinzugefügt werden, sind daher für alle Instanzen zugänglich, die aus der Konstruktormethode erstellt werden. -
Führt die Konstruktormethode mit den angegebenen Argumenten aus, wobei
newInstance
alsthis
Kontext gebunden wird (d. h. alle Verweise aufthis
in der Konstruktormethode beziehen sich jetzt aufnewInstance
). -
Wenn die Konstruktormethode einen nicht-primitiven Wert zurückgibt, wird dieser Rückgabewert das Ergebnis des gesamten
new
Ausdrucks. Andernfalls, wenn die Konstruktormethode nichts 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, wird einen TypeError
werfen.
Das Erstellen eines Objekts mit einer benutzerdefinierten Konstruktormethode erfordert zwei Schritte:
-
Definieren Sie den Objekttyp, indem Sie eine Funktion schreiben, die seinen Namen und seine Eigenschaften festlegt. Zum Beispiel könnte eine Konstruktormethode, um ein Objekt
Foo
zu erstellen, wie folgt 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 Beispiele unten.
Sie können einem zuvor definierten Objekt immer eine Eigenschaft hinzufügen. Zum Beispiel fügt die Anweisung car1.color = "black"
dem car1
eine Eigenschaft color
hinzu und weist ihr den Wert "black"
zu.
Dies wirkt sich jedoch nicht auf andere Objekte aus. Um die neue Eigenschaft zu allen Objekten desselben Typs hinzuzufügen, müssen Sie sie der prototype
Eigenschaft des Konstruktors hinzufügen. Dies definiert eine Eigenschaft, die von allen Objekten gemeinsam genutzt wird, die mit dieser Funktion erstellt wurden, anstatt nur von einer Instanz des Objekttyps. Der folgende Code fügt allen Objekten des Typs Car
eine color
Eigenschaft mit dem Wert "original color"
hinzu und überschreibt diesen Wert dann nur in der Instanz car1
mit dem Wert "black"
. Weitere Informationen finden Sie unter 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 Konstruktormethode wie jede reguläre 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 anders.
Eine Funktion kann wissen, ob sie mit new
aufgerufen wird, 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 unterschiedlich verhält, wenn sie aufgerufen wird versus wenn sie 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 eingebauten JavaScript-Objekte sowohl aufrufbar als auch konstruierbar, obwohl viele von ihnen unterschiedliche Verhaltensweisen zeigen. Um einige zu nennen:
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 eine Zeichenkette zurück, die das aktuelle Datum darstellt, wenn sie aufgerufen wird, äquivalent zunew Date().toString()
.
Nach ES6 ist die Sprache strikter darin, 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 dass er Eigenschaften für Marke, Modell und Baujahr hat.
Dazu 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
die Zeichenfolge "Eagle",
myCar.year
ist die ganze Zahl 1993 usw.
Sie können eine beliebige Anzahl von car
Objekten durch Aufrufe von new
erstellen. Zum
Beispiel:
const kensCar = new Car("Nissan", "300ZX", 1992);
Objekteigenschaften, die selbst ein weiteres Objekt sind
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
Eigenschaft owner
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);
Anstatt beim Erstellen der neuen Objekte einen literalen Zeichenfolgen- oder ganzzahligen Wert zu übergeben, übergeben die
obigen Anweisungen die Objekte rand
und ken
als die
Parameter für die Besitzer. Um den Namen des Besitzers von car2
herauszufinden, können Sie
die folgende Eigenschaft abrufen:
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 Language Specification # sec-new-operator |
Browser-Kompatibilität
BCD tables only load in the browser