Was ist das 'neue' Schlüsselwort in JavaScript?

Das newSchlüsselwort in JavaScript kann beim ersten Auftreten ziemlich verwirrend sein, da die Leute glauben, dass JavaScript keine objektorientierte Programmiersprache ist.

• Was ist es?
• Welche Probleme löst es?
• Wann ist es angebracht und wann nicht?

Es macht 5 Dinge:

1. Es wird ein neues Objekt erstellt. Der Typ dieses Objekts ist einfach Objekt .
2. Es setzt die interne, unzugängliche [[Prototyp]] (dh __proto__ ) Eigenschaft dieses neuen Objekts als externes, zugängliches Prototypobjekt der Konstruktorfunktion (jedes Funktionsobjekt verfügt automatisch über eine Prototypeigenschaft ).
3. Die thisVariable zeigt auf das neu erstellte Objekt.
4. Es führt die Konstruktorfunktion aus und verwendet das neu erstellte Objekt, wann thisimmer dies erwähnt wird.
5. Es gibt das neu erstellte Objekt zurück, es sei denn, die Konstruktorfunktion gibt eine Nicht- nullObjektreferenz zurück. In diesem Fall wird stattdessen diese Objektreferenz zurückgegeben.

Hinweis: Die Konstruktorfunktion bezieht sich auf die Funktion nach dem newSchlüsselwort wie in

new ConstructorFunction(arg1, arg2)

Sobald dies erledigt ist und eine undefinierte Eigenschaft des neuen Objekts angefordert wird, überprüft das Skript stattdessen das [[Prototyp]] - Objekt des Objekts auf die Eigenschaft. Auf diese Weise können Sie etwas Ähnliches wie bei der herkömmlichen Klassenvererbung in JavaScript erhalten.

Der schwierigste Teil dabei ist Punkt Nummer 2. Jedes Objekt (einschließlich Funktionen) hat diese interne Eigenschaft namens [[Prototyp]] . Sie kann nur zum Zeitpunkt der Objekterstellung festgelegt werden, entweder mit new , mit Object.create oder basierend auf dem Literal (Funktionen standardmäßig Function.prototype, Zahlen to Number.prototype usw.). Es kann nur mit Object.getPrototypeOf (someObject) gelesen werden . Es gibt keine andere Möglichkeit, diesen Wert festzulegen oder zu lesen.

Funktionen verfügen neben der Eigenschaft hidden [[prototype]] auch über eine Eigenschaft namens prototype . Auf diese Eigenschaft können Sie zugreifen und Änderungen vornehmen, um geerbte Eigenschaften und Methoden für die von Ihnen erstellten Objekte bereitzustellen.

Hier ist ein Beispiel:

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1.  At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

Es ist wie bei der Klassenvererbung, da jetzt alle Objekte, die Sie verwenden new ObjMaker(), anscheinend auch die Eigenschaft 'b' geerbt haben.

Wenn Sie so etwas wie eine Unterklasse wollen, dann tun Sie dies:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

Ich habe eine Menge Müll zu diesem Thema gelesen, bevor ich endlich diese Seite gefunden habe , auf der dies sehr gut mit schönen Diagrammen erklärt wird.

Angenommen, Sie haben diese Funktion:

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

Wenn Sie dies als eigenständige Funktion wie folgt aufrufen:

Foo();

Durch Ausführen dieser Funktion werden dem windowObjekt ( Aund B) zwei Eigenschaften hinzugefügt . Es fügt es hinzu, windowweil windowes das Objekt ist, das die Funktion aufgerufen hat, wenn Sie es so ausführen, und thisin einer Funktion das Objekt, das die Funktion aufgerufen hat. Zumindest in Javascript.

Nennen Sie es jetzt so mit new:

var bar = new Foo();

Wenn Sie neweinem Funktionsaufruf hinzufügen , wird ein neues Objekt (nur var bar = new Object()) erstellt und das thisinnerhalb der Funktion zeigt auf das Objectgerade erstellte neue Objekt anstatt auf das Objekt, das die Funktion aufgerufen hat. So barist nun ein Objekt mit den Eigenschaften Aund B. Jede Funktion kann ein Konstruktor sein, es macht einfach nicht immer Sinn.

Zusätzlich zu Daniel Howards Antwort ist hier, was newtut (oder zumindest zu tun scheint):

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    }
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
    return res;
}

Während

var obj = New(A, 1, 2);

ist äquivalent zu

var obj = new A(1, 2);

Für Anfänger, um es besser zu verstehen

Probieren Sie den folgenden Code in der Browserkonsole aus.

function Foo() { 
    return this; 
}

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window;  // true
a instanceof Foo;     // false

b instanceof Window;  // false
b instanceof Foo;     // true

Jetzt kannst du die Antwort des Community-Wikis lesen :)

Es ist also wahrscheinlich nicht zum Erstellen von Objektinstanzen gedacht

Es wird genau dafür verwendet. Sie definieren einen Funktionskonstruktor wie folgt:

function Person(name) {
    this.name = name;
}

var john = new Person('John');

Der zusätzliche Vorteil von ECMAScript besteht jedoch darin, dass Sie die .prototypeEigenschaft erweitern können, sodass wir so etwas wie ...

Person.prototype.getName = function() { return this.name; }

Alle Objekte, die mit diesem Konstruktor erstellt wurden, haben jetzt getNameaufgrund der Prototypkette, auf die sie Zugriff haben, eine.

JavaScript ist eine objektorientierte Programmiersprache und wird genau zum Erstellen von Instanzen verwendet. Es basiert eher auf Prototypen als auf Klassen, aber das bedeutet nicht, dass es nicht objektorientiert ist.

Javascript ist eine dynamische Programmiersprache, die das objektorientierte Programmierparadigma unterstützt und zum Erstellen neuer Objektinstanzen verwendet wird.

Klassen sind für Objekte nicht erforderlich - Javascript ist eine prototypbasierte Sprache.

Es gibt bereits einige sehr gute Antworten, aber ich veröffentliche eine neue, um meine Beobachtung zu Fall III unten zu betonen, was passiert, wenn Sie eine explizite return-Anweisung in einer Funktion haben, die Sie gerade newerstellen. Schauen 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 sehen Sie einen einfachen Fall, in dem die anonyme Funktion aufgerufen wird, auf die verwiesen wird Foo. Wenn Sie diese Funktion aufrufen, wird sie zurückgegeben undefined. Da es keine explizite return-Anweisung gibt, fügt der JavaScript-Interpreter eine return undefined;Anweisung am Ende der Funktion zwangsweise ein . Hier ist das Fenster das Aufrufobjekt (kontextbezogen this), das neu Aund BEigenschaften erhält .

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 newerstellt ein JavaScript-Interpreter, der das Schlüsselwort sieht, ein neues Objekt, das als Aufrufobjekt (kontextbezogen this) einer anonymen Funktion fungiert, auf die verwiesen wird Foo. In diesem Fall Aund Bwurden Eigenschaften für das neu erstellte Objekt (anstelle von Fenster - Objekt). Da Sie keine explizite return-Anweisung haben, fügt der JavaScript-Interpreter eine return-Anweisung zwangsweise ein, um das neue Objekt zurückzugeben, das aufgrund der Verwendung des newSchlüsselworts erstellt wurde.

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 erstellt der JavaScript-Interpreter, der das newSchlüsselwort sieht, ein neues Objekt, das als Aufrufobjekt (kontextbezogen this) einer anonymen Funktion fungiert, auf die verwiesen wird Foo. Wieder Aund Bwerden Eigenschaften für das neu erstellte Objekt. Aber dieses Mal , wenn Sie eine explizite Anweisung return haben , so wird JavaScript - Interpreter nicht alles von selbst tun.

In Fall III ist zu beachten, dass das Objekt, das aufgrund eines newSchlüsselworts erstellt wurde, von Ihrem Radar verloren gegangen ist. barzeigt tatsächlich auf ein völlig anderes Objekt, das nicht das ist, das der JavaScript-Interpreter aufgrund eines newSchlüsselworts erstellt hat.

Zitiert David Flanagan aus JavaScripit: The Definitive Guide (6. Ausgabe), Kap. 4, Seite 62:

Wenn ein Objekterstellungsausdruck ausgewertet wird, erstellt JavaScript zuerst ein neues leeres Objekt, genau wie das vom Objektinitialisierer {} erstellte. Als Nächstes ruft es die angegebene Funktion mit den angegebenen Argumenten auf und übergibt das neue Objekt als Wert des Schlüsselworts this. Die Funktion kann damit die Eigenschaften des neu erstellten Objekts initialisieren. Funktionen, die zur Verwendung als Konstruktoren geschrieben wurden, geben keinen Wert zurück, und der Wert des Objekterstellungsausdrucks ist das neu erstellte und initialisierte Objekt. Wenn ein Konstruktor einen Objektwert zurückgibt, wird dieser Wert zum Wert des Objekterstellungsausdrucks und das neu erstellte Objekt wird verworfen.

--- Zusätzliche Informationen ---

Die im Code-Snippet der oben genannten Fälle verwendeten Funktionen haben in der JS-Welt folgende spezielle Namen:

Fall I und II - Konstruktorfunktion

Fall III - Werksfunktion. Factory-Funktionen sollten nicht mit newSchlüsselwörtern verwendet werden, mit denen ich das Konzept im aktuellen Thread erklärt habe.

In diesem Thread können Sie den Unterschied zwischen ihnen nachlesen .

Manchmal ist Code einfacher als Worte:

var func1 = function (x) { this.x = x; }                    // used with 'new' only
var func2 = function (x) { var z={}; z.x = x; return z; }   // used both ways
func1.prototype.y = 11;
func2.prototype.y = 12;

A1 = new func1(1);      // has A1.x  AND  A1.y
A2 =     func1(1);      // undefined ('this' refers to 'window')
B1 = new func2(2);      // has B1.x  ONLY
B2 =     func2(2);      // has B2.x  ONLY

Solange ich kein Prototyp bin, verwende ich für mich den Stil von func2, da er mir innerhalb und außerhalb der Funktion ein bisschen mehr Flexibilität gibt.

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

Wenn Sie das newSchlüsselwort nicht verwenden , ist der Kontext, unter dem die Funktion ausgeführt Vehicle()wird, derselbe Kontext, aus dem Sie die VehicleFunktion aufrufen . Das thisSchlüsselwort verweist auf denselben Kontext. Bei Verwendung new Vehicle()wird ein neuer Kontext erstellt, sodass das Schlüsselwort thisin der Funktion auf den neuen Kontext verweist. Als Gegenleistung erhalten Sie den neu erstellten Kontext.

Das newSchlüsselwort dient zum Erstellen neuer Objektinstanzen. Und ja, Javascript ist eine dynamische Programmiersprache, die das objektorientierte Programmierparadigma unterstützt. Die Konvention über die Objektbenennung lautet: Verwenden Sie immer Großbuchstaben für Objekte, die durch das neue Schlüsselwort instanziiert werden sollen.

obj = new Element();

Zusammenfassung:

Das newSchlüsselwort wird in Javascript verwendet, um ein Objekt aus einer Konstruktorfunktion zu erstellen. Das newSchlüsselwort muss vor dem Konstruktorfunktionsaufruf stehen und führt folgende Aktionen aus:

1. Erstellt ein neues Objekt
2. Legt den Prototyp dieses Objekts auf die Prototyp-Eigenschaft der Konstruktorfunktion fest
3. Bindet die this Schlüsselwort an 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(doggie.__proto__ === Dog.prototype) // true

Was genau passiert:

1. const doggie sagt: Wir brauchen Speicher zum Deklarieren einer Variablen.
2. Der Zuweisungsoperator =sagt: Wir werden diese Variable mit dem Ausdruck nach dem initialisieren=
3. Der Ausdruck ist new Dog(12) . Die JS-Engine erkennt das neue Schlüsselwort, erstellt ein neues Objekt und setzt den Prototyp auf Dog.prototype
4. Die Konstruktorfunktion wird mit dem ausgeführt this auf das neue Objekt festgelegten Wert . In diesem Schritt wird das Alter dem neu erstellten Hundeobjekt zugewiesen.
5. Das neu erstellte Objekt wird zurückgegeben und dem variablen Hund zugeordnet.

Das newSchlüsselwort erstellt Instanzen von Objekten mithilfe von Funktionen als Konstruktor. Zum Beispiel:

var Foo = function() {};
Foo.prototype.bar = 'bar';

var foo = new Foo();
foo instanceof Foo; // true

Instanzen erben von prototypeder Konstruktorfunktion. Also angesichts des obigen Beispiels ...

foo.bar; // 'bar'

Nun, JavaScript per si kann von Plattform zu Plattform sehr unterschiedlich sein, da es immer eine Implementierung der ursprünglichen Spezifikation EcmaScript ist.

Unabhängig von der Implementierung erhalten Sie in jedem Fall alle JavaScript-Implementierungen, die der EcmaScript-Spezifikation entsprechen, eine objektorientierte Sprache. Nach dem ES-Standard:

ECMAScript ist eine objektorientierte Programmiersprache zum Durchführen von Berechnungen und Bearbeiten von Rechenobjekten in einer Hostumgebung.

Nachdem wir uns darauf geeinigt haben, dass JavaScript eine Implementierung von EcmaScript und daher eine objektorientierte Sprache ist. Die Definition dernew Operation in einer objektorientierten Sprache besagt, dass ein solches Schlüsselwort verwendet wird, um eine Objektinstanz aus einer Klasse eines bestimmten Typs (einschließlich anonymer Typen in Fällen wie C #) zu erstellen.

In EcmaScript verwenden wir keine Klassen, wie Sie aus den Spezifikationen lesen können:

ECMAScript verwendet keine Klassen wie die in C ++, Smalltalk oder Java. Stattdessen können Objekte auf verschiedene Arten erstellt werden, beispielsweise über eine Literalnotation oder über Konstruktoren, die Objekte erstellen und dann Code ausführen, der sie alle oder einen Teil davon initialisiert, indem ihren Eigenschaften Anfangswerte zugewiesen werden. Jeder Konstruktor ist eine Funktion mit einer Eigenschaft namens "Prototyp", mit der prototypbasierte Vererbung und gemeinsame Eigenschaften implementiert werden. Objekte werden
mithilfe von Konstruktoren in neuen Ausdrücken erstellt. Beispielsweise erstellt new Date (2009,11) ein neues Date-Objekt. Das Aufrufen eines Konstruktors ohne Verwendung von new hat Konsequenzen, die vom Konstruktor abhängen. Beispielsweise erzeugt Date () eine Zeichenfolgendarstellung des aktuellen Datums und der aktuellen Uhrzeit anstelle eines Objekts.