Frage Was ist das neue Keyword in JavaScript?


Das new Schlüsselwort in JavaScript kann ziemlich verwirrend sein, wenn es zuerst angetroffen wird, da Leute denken, dass JavaScript keine objektorientierte Programmiersprache ist.

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

1555
2017-10-29 21:32


Ursprung


Antworten:


Es macht 5 Dinge:

  1. Es erstellt ein neues Objekt. Der Typ dieses Objekts ist einfach Objekt.
  2. Er setzt das interne, unzugängliche, [[Prototyp]] (d.h. __proto__) Eigenschaft, die externe, zugängliche Konstruktorfunktion zu sein, Prototyp Objekt (jedes Funktionsobjekt hat automatisch eine Prototyp Eigentum).
  3. Es macht das this Variable zeigt auf das neu erstellte Objekt.
  4. Es führt die Konstruktorfunktion aus, wobei das neu erstellte Objekt immer verwendet wird this ist erwähnt.
  5. Sie gibt das neu erstellte Objekt zurück, es sei denn, die Konstruktorfunktion gibt eine nichtnull Objektreferenz. In diesem Fall wird stattdessen diese Objektreferenz zurückgegeben.

Hinweis: Konstruktorfunktion verweist auf die Funktion nach dem new Stichwort, wie in

new ConstructorFunction(arg1, arg2)

Sobald dies geschehen ist, überprüft das Skript, ob eine undefinierte Eigenschaft des neuen Objekts angefordert wurde [[Prototyp]] Objekt für die Eigenschaft stattdessen. Auf diese Weise können Sie der traditionellen Klassenvererbung in JavaScript ähneln.

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

Funktionen, zusätzlich zu den versteckten [[Prototyp]] Eigentum, haben auch eine Eigenschaft namens Prototypund auf diese können Sie zugreifen und sie ä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 eine Klassenvererbung, weil jetzt alle Objekte, die Sie verwenden, verwendet werden new ObjMaker() scheint auch die Eigenschaft 'b' geerbt zu haben.

Wenn Sie etwas wie eine Unterklasse wollen, dann tun Sie das:

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 lese eine Menge Müll zu diesem Thema, bevor ich endlich finde diese Seite, wo dies mit schönen Diagrammen sehr gut erklärt wird.


1958
2017-10-29 22:22



Angenommen, Sie haben diese Funktion:

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

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

Foo();

Wenn Sie diese Funktion ausführen, werden zwei neue Eigenschaften hinzugefügt window Objekt (A und B). Es fügt es dem hinzu window weil window ist das Objekt, das die Funktion aufgerufen hat, wenn Sie es so ausführen, und this In einer Funktion ist das Objekt, das die Funktion aufgerufen hat. In Javascript mindestens.

Jetzt nenn es so mit new:

var bar = new Foo();

Was passiert, wenn Sie hinzufügen? new zu einem Funktionsaufruf ist, dass ein neues Objekt erstellt wird (nur var bar = new Object()) und dass die this innerhalb der Funktion zeigt auf die neue Object Sie haben gerade erstellt, 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, das macht einfach keinen Sinn.


359
2018-06-20 23:46



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

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);

146
2018-05-27 09:23



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 können Sie die Community-Wiki-Antwort lesen :)


85
2017-10-29 21:34



also ist es wahrscheinlich nicht zum erstellen   Instanzen von Objekten

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 mit dem .prototype Eigentum, also können wir etwas wie ...

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

Alle Objekte, die von diesem Konstruktor erstellt werden, haben jetzt a getName wegen der Prototypkette, zu der sie Zugang haben.


33
2017-10-29 21:36



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.


26
2017-10-29 21:37



Javascript ist eine dynamische Programmiersprache, die das objektorientierte Programmierparadigma unterstützt und es zum Erstellen neuer Instanzen von Objekten verwendet.

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


13
2018-05-16 07:21



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

für mich, solange ich nicht Prototype, benutze ich Stil von func2, da es mir ein bisschen mehr Flexibilität innerhalb und außerhalb der Funktion gibt.


3
2017-10-29 21:38



Das new Schlü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 immer Großbuchstaben für Objekte, die durch das neue Schlüsselwort instanziiert werden sollen.

obj = new Element();

2
2017-10-05 02:28