Was ist das Schlüsselwort „new“ in JavaScript?

Die new Schlüsselwort in JavaScript kann ziemlich verwirrend sein, wenn man es zum ersten Mal antrifft, da die Leute dazu neigen zu denken, 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 erstellt ein neues Objekt. Der Typ dieses Objekts ist einfach Objekt.
2. Es setzt die internen, unzugänglichen, [[prototype]] (dh __proto__)-Eigenschaft als externe, zugängliche, Prototyp Objekt (jedes Funktionsobjekt hat automatisch eine Prototyp Eigentum).
3. Es macht die this Variable zeigen auf das neu erstellte Objekt.
4. Es führt die Konstruktorfunktion aus und verwendet dabei immer das neu erstellte Objekt this wird genannt.
5. Es gibt das neu erstellte Objekt zurück, es sei denn, die Konstruktorfunktion gibt ein Nicht-null Objektbezug. In diesem Fall wird stattdessen diese Objektreferenz zurückgegeben.

Notiz: Konstruktorfunktion bezieht sich auf die Funktion nach dem new Stichwort, wie in

new ConstructorFunction(arg1, arg2)

Sobald dies geschehen ist und eine undefinierte Eigenschaft des neuen Objekts angefordert wird, überprüft das Skript die des Objekts [[prototype]] Objekt für die Eigenschaft statt. So können Sie in JavaScript etwas Ähnliches wie bei der traditionellen Klassenvererbung erreichen.

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

Funktionen, zusätzlich zu den versteckten [[prototype]] Eigenschaft, haben auch eine Eigenschaft namens Prototypund darauf können Sie zugreifen und es ändern, 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 Klassenvererbung, weil jetzt alle Objekte, die Sie erstellen, verwendet werden new ObjMaker() scheint auch die Eigenschaft ‘b’ geerbt zu 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 es endlich gefunden habe diese Seitewo 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 so aufrufen:

Foo();

Durch Ausführen dieser Funktion werden zwei Eigenschaften zu hinzugefügt window Objekt (A und B). Es fügt es dem hinzu window da window ist das Objekt, das die Funktion aufgerufen hat, wenn Sie sie so ausführen, und this in einer Funktion ist das Objekt, das die Funktion aufgerufen hat. Zumindest in Javascript.

Nennen Sie es jetzt so mit new:

var bar = new Foo();

Was passiert, wenn Sie hinzufügen new zu einem Funktionsaufruf besteht darin, dass ein neues Objekt erstellt wird (nur var bar = new Object()) und dass die this innerhalb der Funktion zeigt auf das Neue Object Sie gerade erstellt haben, anstatt an das Objekt, das die Funktion aufgerufen hat. Damit bar ist jetzt ein Objekt mit den Eigenschaften A und B. Jede Funktion kann ein Konstruktor sein, es macht nur nicht immer Sinn.

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

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 zum besseren Verständnis

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 können Sie die Community-Wiki-Antwort 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 es mit erweitern können .prototype Eigentum, also können wir so etwas tun wie…

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

Alle von diesem Konstruktor erstellten Objekte haben jetzt eine getName aufgrund der Prototypkette, auf die sie Zugriff haben.

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

Zusammenfassung:

Die new Das Schlüsselwort wird in Javascript verwendet, um ein Objekt aus einer Konstruktorfunktion zu erstellen. Die new Schlüsselwort muss vor dem Konstruktor-Funktionsaufruf platziert werden und wird die folgenden Dinge tun:

1. Erstellt ein neues Objekt
2. Legt den Prototyp dieses Objekts auf die Prototyp-Eigenschaft der Konstruktorfunktion fest
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, um eine Variable zu deklarieren.
2. Der Zuweisungsoperator = sagt: Wir werden diese Variable mit dem Ausdruck nach dem initialisieren =
3. Der Ausdruck ist 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 ausgeführt this Wert auf das neue Objekt gesetzt. In diesem Schritt wird dem neu erstellten Hundeobjekt das Alter zugewiesen.
5. Das neu erstellte Objekt wird zurückgegeben und der Variablen doggie zugewiesen.