Was ist das Schlüsselwort "new" in JavaScript?

Question

El new Schlüsselwort in JavaScript kann beim ersten Mal ziemlich verwirrend sein, da die meisten Leute denken, dass JavaScript keine objektorientierte Programmiersprache ist.

• Was ist das?
• Welche Probleme werden damit gelöst?
• Wann ist es angebracht und wann nicht?

Answer 1

JavaScript es ist eine objektorientierte Programmiersprache und wird genau für die Erstellung von Instanzen verwendet. Sie ist prototypenbasiert und nicht klassenbasiert, aber das bedeutet nicht, dass sie nicht objektorientiert ist.

Answer 2

Zusammenfassung:

El new Schlüsselwort wird in Javascript verwendet, um ein Objekt aus einer Konstruktorfunktion zu erstellen. Die new Schlüsselwort muss vor dem Aufruf der Konstruktorfunktion platziert werden und bewirkt Folgendes:

1. Erzeugt ein neues Objekt
2. Setzt den Prototyp dieses Objekts auf die Prototypeigenschaft der Konstruktorfunktion
3. Bindet die this Schlüsselwort auf das neu erstellte Objekt und führt die Konstruktorfunktion aus
4. Gibt das neu erstellte Objekt zurück

Beispiel:

function Dog (age) {
  this.age = age;
}

const doggie = new Dog(12);

console.log(doggie);
console.log(Object.getPrototypeOf(doggie) === Dog.prototype) // true

Was genau passiert:

1. const doggie sagt: Wir brauchen Speicher für die Deklaration einer Variablen.
2. Der Zuweisungsoperator = sagt: Wir initialisieren diese Variable mit dem Ausdruck nach dem =
3. Der Ausdruck lautet new Dog(12) . Die JS-Engine sieht das neue Schlüsselwort, erstellt ein neues Objekt und setzt den Prototyp auf Dog.prototype
4. Die Konstruktorfunktion wird mit der this Wert auf das neue Objekt gesetzt. In diesem Schritt wird dem neu erstellten Hündchen-Objekt das Alter zugewiesen.
5. Das neu erstellte Objekt wird zurückgegeben und der Variablen doggie zugewiesen.

Answer 3

Es gibt bereits einige sehr gute Antworten, aber ich schreibe eine neue, um meine Beobachtung zum Fall zu unterstreichen III was passiert, wenn Sie eine explizite Rückgabeanweisung in einer Funktion haben, die Sie new auf. Sehen Sie sich die folgenden Fälle an:

Fall I :

var Foo = function(){
  this.A = 1; 
  this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1

Oben ist ein einfacher Fall des Aufrufs der anonymen Funktion, die durch Foo . Wenn Sie diese Funktion aufrufen, gibt sie undefined . Da es keine explizite Rückgabeanweisung gibt, fügt der JavaScript-Interpreter zwangsweise eine return undefined; Anweisung am Ende der Funktion. Hier ist window das Aufrufobjekt (kontextbezogen this ), die eine neue A y B Eigenschaften.

Fall II :

var Foo = function(){
  this.A = 1;
  this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1

Hier sieht der JavaScript-Interpreter die new Schlüsselwort wird ein neues Objekt erzeugt, das als Aufrufobjekt fungiert (kontextbezogene this ) der anonymen Funktion, die durch Foo . In diesem Fall A y B werden zu Eigenschaften des neu erstellten Objekts (anstelle des Fensterobjekts). Da Sie keine explizite Rückgabeanweisung haben, fügt der JavaScript-Interpreter zwangsweise eine Rückgabeanweisung ein, um das neue Objekt zurückzugeben, das durch die Verwendung von new Stichwort.

Fall III :

var Foo = function(){
  this.A = 1;
  this.B = 2;
  return {C:20,D:30}; 
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.

Auch hier sieht der JavaScript-Interpreter die new Schlüsselwort wird ein neues Objekt erzeugt, das als Aufrufobjekt fungiert (kontextbezogene this ) der anonymen Funktion, die durch Foo . Nochmals, A y B werden zu Eigenschaften des neu erstellten Objekts. Aber dieses Mal haben Sie eine explizite Rückgabeanweisung, so dass der JavaScript-Interpreter nicht nichts von sich aus tun.

Das Wichtigste für den Fall III ist, dass das Objekt, das aufgrund von new Das Schlüsselwort ist von Ihrem Radar verschwunden. bar auf ein völlig anderes Objekt verweist, das nicht dasjenige ist, das der JavaScript-Interpreter aufgrund von new Stichwort.

Ich zitiere David Flanagan von JavaScripit: The Definitive Guide (6. Auflage), Kap. 4, Seite 62:

Wenn ein Ausdruck zur Objekterzeugung ausgewertet wird, führt JavaScript zunächst ein neues leeres Objekt, genau wie das vom Objektinitialisierer Initialisierer {}. Anschließend wird die angegebene Funktion mit den Argumenten auf und übergibt das neue Objekt als Wert des Schlüsselworts this Schlüsselworts. Die Funktion kann dann damit die Eigenschaften des neu erstellten Objekts initialisieren. Funktionen, die für die Verwendung als Konstruktoren geschrieben wurden geschrieben werden, geben keinen Wert zurück, und der Wert des Ausdrucks für die Objekterzeugung ist das neu erstellte und initialisierte Objekt. Wenn ein Konstruktor einen einen Objektwert zurück, wird dieser Wert zum Wert des Objekt Erstellungsausdrucks und das neu erstellte Objekt wird verworfen.

--- Zusätzliche Informationen ---

Die Funktionen, die im Codeausschnitt der obigen Fälle verwendet werden, haben in der JS-Welt spezielle Namen wie unten:

Fall I und II - Konstrukteur-Funktion

Fall III - Werkseitige Funktion. Fabrik-Funktionen sollte nicht verwendet werden mit new Schlüsselwort, das ich zur Erläuterung des Konzepts im aktuellen Thread verwendet habe.

Über die Unterschiede zwischen ihnen können Sie lesen in este Thema.

Answer 4

Javascript ist eine dynamische Programmiersprache, die das objektorientierte Programmierparadigma unterstützt und für die Erstellung neuer Instanzen von Objekten verwendet wird.

Klassen sind für Objekte nicht notwendig - Javascript ist ein prototypisch Sprache.

Answer 5

El new Schlüsselwort ändert den Kontext, in dem die Funktion ausgeführt wird, und gibt einen Zeiger auf diesen Kontext zurück.

Wenn Sie nicht die new Schlüsselwort, den Kontext, in dem die Funktion Vehicle() läuft, ist derselbe Kontext, aus dem Sie die Funktion Vehicle Funktion. Die Website this Schlüsselwort auf denselben Kontext verweisen. Wenn Sie new Vehicle() wird ein neuer Kontext erstellt, so dass das Schlüsselwort this innerhalb der Funktion verweist auf den neuen Kontext. Als Rückgabe erhalten Sie den neu erstellten Kontext.