Baseline Widely available
Der new
Operator ermöglicht es Entwicklern, eine Instanz eines benutzerdefinierten Objekttyps oder eines der integrierten Objekttypen zu erstellen, die eine Konstruktorfunktion besitzen.
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 zu new Foo()
, d.h. wenn keine Argumentenliste angegeben wird, wird Foo
ohne Argumente aufgerufen.
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 die prototype
-Eigenschaft der Konstruktorfunktion, falls das prototype
ein Object
ist. Andernfalls bleibt newInstance
ein einfaches Objekt mit Object.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
als this
Kontext (d.h. alle Verweise auf this
in der Konstruktorfunktion beziehen sich jetzt auf newInstance
).
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, wird newInstance
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:
function Foo(bar1, bar2) {
this.bar1 = bar1;
this.bar2 = bar2;
}
Eine Instanz des Objekts mit new
erstellen.
const 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()
, und Function()
verhalten sich gleich, wenn sie als Funktion oder als Konstruktor aufgerufen werden.Boolean()
, Number()
, und String()
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 zu new Date().toString()
.Nach ES6 ist die Sprache strenger darüber, welche Konstruktoren und welche Funktionen sind. Zum Beispiel:
Symbol()
und BigInt()
können nur ohne new
aufgerufen werden. Der Versuch, sie zu konstruieren, führt zu einem TypeError
.Proxy
und Map
können nur mit new
konstruiert werden. Der Versuch, sie aufzurufen, führt zu einem TypeError
.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:
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 Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4