Qual è la differenza tra `new Object ()` e object notation letterale?

Qual è la differenza tra questa sintassi basata sul costruttore per la creazione di un oggetto:

person = new Object()

... e questa sintassi letterale:

person = {
    property1 : "Hello"
};

Sembra che entrambi facciano la stessa cosa, sebbene JSLint preferisca usare la notazione letterale dell'oggetto.

Quale è meglio e perchè?

Entrambi fanno la stessa cosa (a meno che qualcuno non abbia fatto qualcosa di insolito), a parte il fatto che il secondo crea un oggetto e aggiunge una proprietà ad esso. Ma la notazione letterale occupa meno spazio nel codice sorgente. È chiaramente riconoscibile ciò che sta accadendo, quindi usando new Object(), stai davvero scrivendo di più e (in teoria, se non ottimizzato dal motore JavaScript) facendo una chiamata di funzione non necessaria.

Questi

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

person = {
    property1 : "Hello"
};

tecnicamente non fare la stessa cosa. Il primo crea solo un oggetto. Il secondo ne crea uno e assegna una proprietà. Affinché il primo sia lo stesso, è necessario un secondo passaggio per creare e assegnare la proprietà.

Il "qualcosa di insolito" che qualcuno potrebbe fare sarebbe ombreggiare o assegnare al Objectglobale predefinito :

// Don't do this
Object = 23;

In quel caso insolito , new Objectfallirà ma{} funzionerà.

In pratica, non c'è mai un motivo per usarlo new Objectpiuttosto che {}(a meno che tu non abbia fatto una cosa molto insolita).

Non c'è differenza per un oggetto semplice senza metodi come nel tuo esempio. Tuttavia, c'è una grande differenza quando inizi ad aggiungere metodi al tuo oggetto.

Modo letterale:

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

Modo prototipo:

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

Entrambi i modi consentono la creazione di istanze di Objquesto tipo:

var foo = new Obj( "hello" ); 

Tuttavia, con il metodo letterale, porti una copia del sayHellometodo all'interno di ogni istanza dei tuoi oggetti. Considerando che, con il metodo prototipo, il metodo è definito nel prototipo dell'oggetto e condiviso tra tutte le istanze dell'oggetto. Se hai molti oggetti o molti metodi, il modo letterale può portare a grandi sprechi di memoria.

In JavaScript, possiamo dichiarare un nuovo oggetto vuoto in due modi:

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

Non ho trovato nulla che suggerisca che ci siano differenze significative tra questi due riguardo al modo in cui operano dietro le quinte (per favore correggimi se sbaglio, mi piacerebbe saperlo). Tuttavia, il secondo metodo (utilizzando la notazione letterale dell'oggetto) offre alcuni vantaggi.

1. È più corto (10 caratteri per essere precisi)
2. È più facile e più strutturato creare oggetti al volo
3. Non importa se un buffone ha ignorato involontariamente l'Oggetto

Considera un nuovo oggetto che contiene i membri Nome e TelNo. Usando la nuova convenzione Object (), possiamo crearla in questo modo:

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

Le proprietà di Expando di JavaScript ci consente di creare nuovi membri in questo modo al volo e raggiungiamo ciò che intendevamo. Tuttavia, in questo modo non è molto strutturato o incapsulato. E se volessimo specificare i membri al momento della creazione, senza dover fare affidamento su expando proprietà e assegnazione post-creazione?

Qui è dove la notazione letterale dell'oggetto può aiutare:

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

Qui abbiamo ottenuto lo stesso effetto in una riga di codice e significativamente meno caratteri.

Un'ulteriore discussione sui metodi di costruzione degli oggetti sopra è disponibile su: JavaScript e Object Oriented Programming (OOP).

E infine, che dire dell'idiota che ha scavalcato l'Oggetto? Pensavi che non fosse possibile? Bene, questo JSFiddle dimostra il contrario. L'uso della notazione letterale dell'oggetto ci impedisce di cadere nel fallo di questa buffoneria.

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

Sul mio computer utilizzando Node.js, ho eseguito il seguente:

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

Nota, questa è un'estensione di ciò che si trova qui: Perché arr = [] è più veloce di arr = new Array?

la mia uscita è stata la seguente:

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

così chiaramente {} e [] sono più veloci dell'uso di new per la creazione di oggetti / array vuoti.

Tutti qui parlano delle somiglianze dei due. Indicherò le differenze.

1. L'uso new Object()consente di passare un altro oggetto. Il risultato ovvio è che l'oggetto appena creato verrà impostato sullo stesso riferimento. Ecco un codice di esempio:

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

2. L'uso non è limitato agli oggetti come negli oggetti OOP. Altri tipi potrebbero essere passati anche ad esso. La funzione imposterà il tipo di conseguenza. Ad esempio, se gli passiamo il numero intero 1, verrà creato per noi un oggetto di tipo numero.

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

3. L'oggetto creato utilizzando il metodo sopra ( new Object(1)) verrebbe convertito nel tipo di oggetto se una proprietà viene aggiunta ad esso.

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

4. Se l'oggetto è una copia di una classe di oggetti figlio, è possibile aggiungere la proprietà senza la conversione del tipo.

   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

In realtà, ci sono diversi modi per creare oggetti in JavaScript. Quando si desidera solo creare un oggetto, non si ha alcun vantaggio nel creare oggetti " basati sul costruttore " utilizzando l' operatore " nuovo ". È come creare un oggetto usando la sintassi " letterale oggetto ". Ma gli oggetti " basati su costruttori " creati con un " nuovo " operatore sono incredibilmente utili quando si pensa alla " eredità prototipale ". Non è possibile mantenere la catena di ereditarietà con oggetti creati con sintassi letterale. Ma puoi creare una funzione di costruzione , associare proprietà e metodi al suo prototipo."operatore, restituirà un oggetto che avrà accesso a tutti i metodi e proprietà associati al prototipo di quella funzione di costruzione.

Ecco un esempio di creazione di un oggetto utilizzando la funzione di costruzione (vedere la spiegazione del codice in basso):

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

Ora puoi creare tutti gli oggetti che vuoi istanziando la funzione di costruzione Person e tutti erediteranno fullname () da esso.

Nota: la parola chiave " this " farà riferimento a un oggetto vuoto all'interno di una funzione di costruzione e ogni volta che si crea un nuovo oggetto da Person utilizzando l' operatore " new ", verrà automaticamente restituito un oggetto contenente tutte le proprietà e i metodi associati alla parola chiave " this " . E questi oggetti erediteranno sicuramente i metodi e le proprietà associati al prototipo della funzione di costruzione Person (che è il vantaggio principale di questo approccio).

A proposito, se si desidera ottenere la stessa funzionalità con la sintassi " letterale oggetto ", è necessario creare fullname () su tutti gli oggetti come di seguito:

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

Alla fine, se ora mi chiedi perché dovrei usare l' approccio della funzione di costruzione anziché l' oggetto letterale approccio :

*** L'eredità prototipale consente una semplice catena di eredità che può essere immensamente utile e potente.

*** Risparmia memoria ereditando metodi e proprietà comuni definiti nel prototipo delle funzioni di costruzione. Altrimenti, dovresti copiarli più e più volte in tutti gli oggetti.

Spero che abbia senso.

Inoltre, secondo alcuni dei libri javascript di O'Really .... (citato)

Un altro motivo per usare valori letterali rispetto al costruttore Object è che non esiste una risoluzione dell'ambito. Poiché è possibile che sia stato creato un costruttore locale con lo stesso nome, l'interprete deve cercare la catena dell'ambito dal punto in cui si chiama Object () fino a quando non trova il costruttore Object globale.

Ho trovato una differenza, per ES6 / ES2015. Non è possibile restituire un oggetto utilizzando la sintassi della funzione freccia abbreviata, a meno che non si contorni l'oggetto 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 } ]

Questo perché il compilatore è confuso tra {}parentesi e pensa che n: isia un'etichetta: istruzione ; il punto e virgola è facoltativo, quindi non se ne lamenta.

Se aggiungi un'altra proprietà all'oggetto, verrà generato un errore.

$ 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 :

Aggiornamento 2019

Ho eseguito lo stesso codice di @rjloura sul mio nodo OSX High Sierra 10.13.6 versione 10.13.0 e questi sono i risultati

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

L'uso della memoria è diverso se si creano 10 mila istanze. new Object()conserverà solo una copia mentre {}ne conserverà 10 mila copie.