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 zu erstellen, die eine Konstruktorfunktion 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 spezifiziert. Der Ausdruck kann alles mit ausreichender Priorität sein, einschließlich eines Identifikators, eines Property-Zugriffs oder eines anderen
newAusdrucks, aber optionale Verkettung ist nicht erlaubt. arg1,arg2, …,argN-
Eine Liste von Werten, mit denen der
constructoraufgerufen wird.new Fooist äquivalent zunew Foo(), d. h. wenn keine Argumentenliste angegeben ist, wirdFooohne Argumente aufgerufen.
Beschreibung
Wenn eine Funktion mit dem new Schlüsselwort aufgerufen wird, wird die Funktion als Konstruktor verwendet. new führt folgende Aufgaben aus:
-
Erstellt ein leeres, einfaches JavaScript-Objekt. Um der Bequemlichkeit willen nennen wir es
newInstance. -
Verweist das [[Prototype]] von
newInstanceauf dieprototypeEigenschaft der Konstruktorfunktion, wenn dasprototypeeinObjectist. Andernfalls bleibtnewInstanceals einfaches Objekt mitObject.prototypeals [[Prototype]] bestehen.Hinweis: Eigenschaften/Objekte, die zur
prototypeEigenschaft der Konstruktorfunktion hinzugefügt werden, sind somit für alle Instanzen zugänglich, die von der Konstruktorfunktion erstellt wurden. -
Führt die Konstruktorfunktion mit den gegebenen Argumenten aus und bindet
newInstancealsthisKontext (d. h. alle Verweise aufthisin der Konstruktorfunktion beziehen sich jetzt aufnewInstance). -
Wenn die Konstruktorfunktion einen nicht-primitiven Wert zurückgibt, wird dieser Rückgabewert das Ergebnis des gesamten
newAusdrucks. Andernfalls, wenn die Konstruktorfunktion nichts zurückgibt oder einen primitiven Wert zurückgibt, wird stattdessennewInstancezurü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 Konstruktorfunktion erfordert zwei Schritte:
-
Definieren Sie den Objekttyp, indem Sie eine Funktion schreiben, die den Namen und die Eigenschaften des Objekts spezifiziert. Zum Beispiel könnte eine Konstruktorfunktion zur Erstellung eines Objekts
Foofolgendermaßen 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 einer zuvor definierten Objektinstanz jederzeit eine Eigenschaft hinzufügen. Zum Beispiel fügt die Anweisung car1.color = "black" die Eigenschaft color zu car1 hinzu und weist ihr den Wert "black" zu.
Dies beeinflusst jedoch keine anderen Objekte. Um die neue Eigenschaft allen Objekten des gleichen Typs hinzuzufügen, müssen Sie die Eigenschaft zur prototype Eigenschaft des Konstruktors hinzufügen. Dadurch wird eine Eigenschaft definiert, die von allen mit dieser Funktion erstellten Objekten geteilt wird, anstatt von nur 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 mit dem String "black" nur im Instanzobjekt car1. 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 Konstruktorfunktion 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 prüft. new.target ist nur dann undefined, wenn die Funktion ohne new aufgerufen wird. Zum Beispiel können Sie eine Funktion haben, die sich anders verhält, wenn sie aufgerufen wird, im Vergleich zu 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 JavaScript-Built-ins 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()zwingen ihr Argument beim Aufruf in den jeweiligen primitiven Typ, und geben Wrapper-Objekte zurück, wenn sie konstruiert werden.Date()gibt beim Aufruf einen String zurück, der das aktuelle Datum darstellt, wasnew Date().toString()entspricht.
Nach ES6 ist die Sprache strenger darüber, was Konstruktoren und was 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 Sie möchten, dass er Eigenschaften für Marke, Modell und Jahr hat.
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 die ganze Zahl 1993, und so weiter.
Sie können eine beliebige Anzahl von car Objekten 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 dann instanziieren Sie 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 erfordert, 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 das folgende:
const car1 = new Car("Eagle", "Talon TSi", 1993, rand);
const car2 = new Car("Nissan", "300ZX", 1992, ken);
Anstatt einen Literalstring oder eine ganze Zahl beim Erstellen der neuen Objekte zu übergeben, übergeben die
oben stehenden 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 Language Specification # sec-new-operator |
Browser-Kompatibilität
BCD tables only load in the browser