Was ist der Unterschied zwischen "new Object ()" und der Objektliteralnotation?

Was ist der Unterschied zwischen dieser konstruktorbasierten Syntax zum Erstellen eines Objekts:

person = new Object()

... und diese wörtliche Syntax:

person = {
    property1 : "Hello"
};

Es scheint, dass beide dasselbe tun, obwohl JSLint die Verwendung der Objektliteralnotation bevorzugt.

Welches ist besser und warum?

Beide machen dasselbe (es sei denn, jemand hat etwas Ungewöhnliches getan), außer dass Ihr zweites Objekt erstellt und ihm eine Eigenschaft hinzufügt. Die Literalschreibweise benötigt jedoch weniger Platz im Quellcode. Es ist klar erkennbar, was gerade passiert. new Object()Wenn Sie also verwenden , tippen Sie wirklich nur mehr und führen (theoretisch, wenn nicht durch die JavaScript-Engine optimiert) einen unnötigen Funktionsaufruf durch.

Diese

person = new Object() /*You should put a semicolon here too.  
It's not required, but it is good practice.*/ 
-or-

person = {
    property1 : "Hello"
};

technisch nicht das gleiche tun. Der erste erstellt nur ein Objekt. Der zweite erstellt eine und weist eine Eigenschaft zu. Damit der erste identisch ist, benötigen Sie einen zweiten Schritt, um die Eigenschaft zu erstellen und zuzuweisen.

Das "Ungewöhnliche", das jemand tun könnte, wäre, den Standard Objectglobal zu beschatten oder zuzuweisen :

// Don't do this
Object = 23;

In diesem höchst ungewöhnlichen Fall new Objectwird aber scheitern{} wird funktionieren.

In der Praxis gibt es nie einen Grund, new Objectanstatt zu verwenden {}(es sei denn, Sie haben diese sehr ungewöhnliche Sache getan).

Für ein einfaches Objekt ohne Methoden wie in Ihrem Beispiel gibt es keinen Unterschied. Es gibt jedoch einen großen Unterschied, wenn Sie Ihrem Objekt Methoden hinzufügen.

Wörtlicher Weg:

function Obj( prop ) { 
    return { 
        p : prop, 
        sayHello : function(){ alert(this.p); }, 
    }; 
} 

Prototyp Weg:

function Obj( prop ) { 
    this.p = prop; 
} 
Obj.prototype.sayHello = function(){alert(this.p);}; 

In beiden Fällen können Instanzen Objwie diese erstellt werden:

var foo = new Obj( "hello" ); 

Mit der wörtlichen Methode tragen Sie jedoch eine Kopie der sayHelloMethode in jeder Instanz Ihrer Objekte. Während beim Prototyp die Methode im Objektprototyp definiert und von allen Objektinstanzen gemeinsam genutzt wird. Wenn Sie viele Objekte oder Methoden haben, kann der wörtliche Weg zu einer ziemlich großen Speicherverschwendung führen.

In JavaScript können wir ein neues leeres Objekt auf zwei Arten deklarieren:

var obj1 = new Object();  
var obj2 = {};  

Ich habe nichts gefunden, was darauf hindeutet, dass es einen signifikanten Unterschied zwischen diesen beiden in Bezug auf ihre Funktionsweise hinter den Kulissen gibt (bitte korrigieren Sie mich, wenn ich falsch liege - ich würde es gerne wissen). Die zweite Methode (unter Verwendung der Objektliteralnotation) bietet jedoch einige Vorteile.

1. Es ist kürzer (10 Zeichen um genau zu sein)
2. Es ist einfacher und strukturierter, Objekte im laufenden Betrieb zu erstellen
3. Es spielt keine Rolle, ob ein Trottel versehentlich ein Objekt überschrieben hat

Stellen Sie sich ein neues Objekt vor, das den Mitgliedsnamen und TelNo enthält. Mit der neuen Object () -Konvention können wir sie folgendermaßen erstellen:

var obj1 = new Object();  
obj1.Name = "A Person";  
obj1.TelNo = "12345"; 

Die Expando-Eigenschaften von JavaScript können wir auf diese Weise im neue Mitglieder erstellen und das erreichen, was beabsichtigt war. Dieser Weg ist jedoch nicht sehr strukturiert oder gekapselt. Was wäre, wenn wir die Mitglieder bei der Erstellung angeben wollten, ohne uns auf die Eigenschaften von expando und die Zuweisung nach der Erstellung verlassen zu müssen?

Hier kann die Objektliteralnotation helfen:

var obj1 = {Name:"A Person",TelNo="12345"};  

Hier haben wir den gleichen Effekt in einer Codezeile und deutlich weniger Zeichen erzielt.

Eine weitere Diskussion der oben genannten Objektkonstruktionsmethoden finden Sie unter: JavaScript und Object Oriented Programming (OOP).

Und schließlich, was ist mit dem Idioten, der Object außer Kraft gesetzt hat? Hast du gedacht, dass es nicht möglich ist? Nun, diese JSFiddle beweist das Gegenteil . Die Verwendung der Objekt-Literal-Notation verhindert, dass wir diesem Trottel verfallen.

(Von http://www.jameswiseman.com/blog/2011/01/19/jslint-messages-use-the-object-literal-notation/ )

Auf meinem Computer mit Node.js habe ich Folgendes ausgeführt:

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');

Beachten Sie, dass dies eine Erweiterung dessen ist, was hier zu finden ist: Warum ist arr = [] schneller als arr = new Array?

Meine Ausgabe war die folgende:

Testing Array:
using[]: 1091ms
using new: 2286ms
Testing Object:
using{}: 870ms
using new: 5637ms

{} und [] sind also eindeutig schneller als die Verwendung von new zum Erstellen leerer Objekte / Arrays.

Alle hier sprechen über die Ähnlichkeiten der beiden. Ich werde auf die Unterschiede hinweisen.

1. Mit new Object()können Sie ein anderes Objekt übergeben. Das offensichtliche Ergebnis ist, dass das neu erstellte Objekt auf dieselbe Referenz gesetzt wird. Hier ist ein Beispielcode:

   var obj1 = new Object();
   obj1.a = 1;
   var obj2 = new Object(obj1);
   obj2.a // 1

2. Die Verwendung ist nicht auf Objekte wie in OOP-Objekten beschränkt. Andere Typen könnten ebenfalls an ihn übergeben werden. Die Funktion stellt den Typ entsprechend ein. Wenn wir beispielsweise die Ganzzahl 1 übergeben, wird ein Objekt vom Typ Nummer für uns erstellt.

   var obj = new Object(1);
   typeof obj // "number"

3. Das mit der obigen Methode ( new Object(1)) erstellte Objekt wird in den Objekttyp konvertiert, wenn ihm eine Eigenschaft hinzugefügt wird.

   var obj = new Object(1);
   typeof obj // "number"
   obj.a = 2;
   typeof obj // "object"

4. Wenn das Objekt eine Kopie einer untergeordneten Objektklasse ist, können wir die Eigenschaft ohne die Typkonvertierung hinzufügen.

   var obj = new Object("foo");
   typeof obj // "object"
   obj === "foo" // true
   obj.a = 1;
   obj === "foo" // true
   obj.a // 1
   var str = "foo";
   str.a = 1;
   str.a // undefined

Tatsächlich gibt es verschiedene Möglichkeiten, Objekte in JavaScript zu erstellen. Wenn Sie nur ein Objekt erstellen möchten, hat das Erstellen von " konstruktorbasierten " Objekten mit dem Operator " new " keinen Vorteil . Es ist dasselbe wie das Erstellen eines Objekts mit der Syntax " Objektliteral ". " Konstruktorbasierte " Objekte, die mit dem Operator " new " erstellt wurden, sind jedoch unglaublich nützlich, wenn Sie über " prototypische Vererbung " nachdenken . Sie können die Vererbungskette nicht mit Objekten verwalten, die mit Literal-Syntax erstellt wurden. Sie können jedoch eine Konstruktorfunktion erstellen , Eigenschaften und Methoden an den Prototyp anhängen."operator, gibt es ein Objekt zurück, das Zugriff auf alle Methoden und Eigenschaften hat, die mit dem Prototyp dieser Konstruktorfunktion verknüpft sind.

Hier ist ein Beispiel für das Erstellen eines Objekts mithilfe der Konstruktorfunktion (siehe Code-Erklärung unten):

function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

Person.prototype.fullname = function() {
    console.log(this.firstname + ' ' + this.lastname);
}

var zubaer = new Person('Zubaer', 'Ahammed');
var john = new Person('John', 'Doe');

zubaer.fullname();
john.fullname();

Jetzt können Sie so viele Objekte erstellen, wie Sie möchten, indem Sie die Personenkonstruktionsfunktion instanziieren. Alle Objekte erben den vollständigen Namen () davon.

Hinweis: Das Schlüsselwort " this " bezieht sich auf ein leeres Objekt innerhalb einer Konstruktorfunktion. Wenn Sie mit dem Operator " new " ein neues Objekt aus Person erstellen , wird automatisch ein Objekt zurückgegeben, das alle Eigenschaften und Methoden enthält, die mit dem Schlüsselwort " this " verknüpft sind . Und diese Objekte erben mit Sicherheit die Methoden und Eigenschaften, die mit dem Prototyp der Person-Konstruktorfunktion verbunden sind (was der Hauptvorteil dieses Ansatzes ist).

Übrigens, wenn Sie die gleiche Funktionalität mit der " Objektliteral " -Syntax erhalten möchten, müssen Sie für alle Objekte wie folgt den vollständigen Namen () erstellen:

var zubaer = {
    firstname: 'Zubaer',
    lastname: 'Ahammed',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

var john= {
    firstname: 'John',
    lastname: 'Doe',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

zubaer.fullname();
john.fullname();

Wenn Sie jetzt fragen, warum ich den Konstruktorfunktionsansatz anstelle des Objektliteralansatzes verwenden soll :

*** Die prototypische Vererbung ermöglicht eine einfache Vererbungskette, die äußerst nützlich und leistungsfähig sein kann.

*** Es spart Speicher, indem allgemeine Methoden und Eigenschaften geerbt werden, die im Prototyp der Konstruktorfunktionen definiert sind. Andernfalls müssten Sie sie in allen Objekten immer wieder kopieren.

Ich hoffe das macht Sinn.

Auch nach einigen der O'Really-Javascript-Bücher .... (zitiert)

Ein weiterer Grund für die Verwendung von Literalen im Gegensatz zum Objektkonstruktor ist, dass es keine Bereichsauflösung gibt. Da Sie möglicherweise einen lokalen Konstruktor mit demselben Namen erstellt haben, muss der Interpreter die Bereichskette von der Stelle, an der Sie Object () aufrufen, bis zum Auffinden des globalen Objektkonstruktors nachschlagen.

Ich habe einen Unterschied für ES6 / ES2015 festgestellt. Sie können ein Objekt nicht mit der Kurzpfeil-Funktionssyntax zurückgeben, es sei denn, Sie umgeben das Objekt mit new Object().

> [1, 2, 3].map(v => {n: v});
[ undefined, undefined, undefined ]
> [1, 2, 3].map(v => new Object({n: v}));
[ { n: 1 }, { n: 2 }, { n: 3 } ]

Dies liegt daran, dass der Compiler durch die {}Klammern verwirrt ist und denkt, n: ies handele sich um ein Label: Anweisungskonstrukt ; Das Semikolon ist optional, damit es sich nicht darüber beschwert.

Wenn Sie dem Objekt eine weitere Eigenschaft hinzufügen, wird schließlich ein Fehler ausgegeben.

$ node -e "[1, 2, 3].map(v => {n: v, m: v+1});"
[1, 2, 3].map(v => {n: v, m: v+1});
                           ^

SyntaxError: Unexpected token :

Update 2019

Ich habe auf meinem OSX High Sierra 10.13.6-Knoten Version 10.13.0 denselben Code wie @rjloura ausgeführt, und dies sind die Ergebnisse

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');


Testing Array:
using[]: 117.613ms
using new: 117.168ms
Testing Object:
using{}: 117.205ms
using new: 118.644ms

Die Speichernutzung ist unterschiedlich, wenn Sie 10.000 Instanzen erstellen. new Object()wird nur eine Kopie {}behalten, während zehntausend Kopien aufbewahrt werden.