¿Cuál es la diferencia entre `new Object ()` y la notación literal de objeto?

¿Cuál es la diferencia entre esta sintaxis basada en constructor para crear un objeto?

person = new Object()

... y esta sintaxis literal:

person = {
    property1 : "Hello"
};

Parece que ambos hacen lo mismo, aunque JSLint prefiere que use notación literal de objeto.

¿Cuál es mejor y por qué?

Ambos hacen lo mismo (a menos que alguien haya hecho algo inusual), aparte de eso, el segundo crea un objeto y le agrega una propiedad. Pero la notación literal ocupa menos espacio en el código fuente. Es claramente reconocible en cuanto a lo que está sucediendo, por lo que al usarlo new Object(), realmente solo está escribiendo más y (en teoría, si no está optimizado por el motor JavaScript) haciendo una llamada de función innecesaria.

Estas

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

person = {
    property1 : "Hello"
};

técnicamente no hago lo mismo. El primero solo crea un objeto. El segundo crea uno y asigna una propiedad. Para que el primero sea el mismo, necesita un segundo paso para crear y asignar la propiedad.

El "algo inusual" que alguien podría hacer sería sombrear o asignar al Objectglobal predeterminado :

// Don't do this
Object = 23;

En ese caso altamente inusual , new Objectfallará pero {}funcionará.

En la práctica, nunca hay una razón para usar en new Objectlugar de {}(a menos que hayas hecho algo muy inusual).

No hay diferencia para un objeto simple sin métodos como en su ejemplo. Sin embargo, hay una gran diferencia cuando comienzas a agregar métodos a tu objeto.

Forma literal:

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

Forma de prototipo:

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

Ambas formas permiten la creación de instancias Objcomo esta:

var foo = new Obj( "hello" ); 

Sin embargo, con la forma literal, llevas una copia del sayHellométodo dentro de cada instancia de tus objetos. Mientras que, con la forma del prototipo, el método se define en el prototipo del objeto y se comparte entre todas las instancias del objeto. Si tiene muchos objetos o muchos métodos, la forma literal puede conducir a un desperdicio de memoria bastante grande.

En JavaScript, podemos declarar un nuevo objeto vacío de dos maneras:

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

No he encontrado nada que sugiera que hay una diferencia significativa entre estos dos con respecto a cómo operan detrás de escena (corríjame si estoy equivocado, me encantaría saberlo). Sin embargo, el segundo método (usando la notación literal del objeto) ofrece algunas ventajas.

1. Es más corto (10 caracteres para ser precisos)
2. Es más fácil y más estructurado crear objetos sobre la marcha.
3. No importa si algún bufón ha anulado accidentalmente el objeto

Considere un nuevo objeto que contiene los miembros Nombre y TelNo. Usando la nueva convención Object (), podemos crearla así:

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

La característica de propiedades de Expando de JavaScript nos permite crear nuevos miembros de esta manera sobre la marcha, y logramos lo que pretendíamos. Sin embargo, esta forma no es muy estructurada o encapsulada. ¿Qué pasaría si quisiéramos especificar los miembros en el momento de la creación, sin tener que depender de las propiedades de expansión y la asignación posterior a la creación?

Aquí es donde la notación literal del objeto puede ayudar:

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

Aquí hemos logrado el mismo efecto en una línea de código y significativamente menos caracteres.

Puede encontrar más información sobre los métodos de construcción de objetos anteriores en: JavaScript y Programación Orientada a Objetos (OOP).

Y finalmente, ¿qué pasa con el idiota que anuló a Object? ¿Creías que no era posible? Bueno, este JSFiddle demuestra lo contrario. El uso de la notación literal del objeto nos impide caer en esta bufonada.

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

En mi máquina usando Node.js, ejecuté lo siguiente:

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

Tenga en cuenta que esta es una extensión de lo que se encuentra aquí: ¿Por qué arr = [] es más rápido que arr = new Array?

mi salida fue la siguiente:

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

claramente {} y [] son ​​más rápidos que usar new para crear objetos / matrices vacíos.

Todos aquí están hablando de las similitudes de los dos. Voy a señalar las diferencias.

1. Usar le new Object()permite pasar otro objeto. El resultado obvio es que el objeto recién creado se establecerá con la misma referencia. Aquí hay un código de muestra:

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

2. El uso no se limita a los objetos como en los objetos OOP. También se le podrían pasar otros tipos. La función establecerá el tipo en consecuencia. Por ejemplo, si le pasamos el número entero 1, se creará un objeto de tipo número.

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

3. El objeto creado usando el método anterior ( new Object(1)) se convertiría al tipo de objeto si se le agrega una propiedad.

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

4. Si el objeto es una copia de una clase secundaria de objeto, podríamos agregar la propiedad sin la conversión de 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

En realidad, hay varias formas de crear objetos en JavaScript. Cuando solo desea crear un objeto, no hay beneficio de crear objetos " basados ​​en el constructor " utilizando el operador " nuevo ". Es lo mismo que crear un objeto usando la sintaxis " literal del objeto ". Pero los objetos " basados ​​en constructores " creados con el operador " nuevo " tienen un uso increíble cuando piensas en " herencia prototípica ". No puede mantener la cadena de herencia con objetos creados con sintaxis literal. Pero puede crear una función de constructor , adjuntar propiedades y métodos a su prototipo."operador, devolverá un objeto que tendrá acceso a todos los métodos y propiedades adjuntas con el prototipo de esa función constructora.

Aquí hay un ejemplo de cómo crear un objeto usando la función de constructor (vea la explicación del código en la parte inferior):

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

Ahora, puede crear tantos objetos como desee instanciando la función de construcción Persona y todos ellos heredarán el nombre completo () de ella.

Nota: " esta " palabra clave se referirá a un objeto vacío dentro de una función de constructor y cada vez que cree un nuevo objeto desde Persona usando el operador " nuevo ", devolverá automáticamente un objeto que contiene todas las propiedades y métodos adjuntos con la palabra clave " este " . Y estos objetos seguramente heredarán los métodos y propiedades asociados con el prototipo de la función de constructor Persona (que es la principal ventaja de este enfoque).

Por cierto, si desea obtener la misma funcionalidad con la sintaxis " literal de objeto ", tendría que crear el nombre completo () en todos los objetos como se muestra a continuación:

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

Por último, si ahora pregunta por qué debería usar el enfoque de función de constructor en lugar del enfoque literal de objeto :

*** La herencia prototípica permite una simple cadena de herencia que puede ser inmensamente útil y poderosa.

*** Ahorra memoria al heredar métodos comunes y propiedades definidas en el prototipo de funciones de constructor. De lo contrario, tendría que copiarlos una y otra vez en todos los objetos.

Espero que esto tenga sentido.

Además, según algunos de los libros de JavaScript de O'Really ... (citado)

Otra razón para usar literales en lugar del constructor de objetos es que no hay una resolución de alcance. Debido a que es posible que haya creado un constructor local con el mismo nombre, el intérprete debe buscar la cadena de alcance desde el lugar al que está llamando Object () hasta encontrar el constructor global de Object.

He encontrado una diferencia, para ES6 / ES2015. No puede devolver un objeto utilizando la sintaxis de la función de flecha abreviada, a menos que rodee el objeto con 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 } ]

Esto se debe a que el compilador está confundido por los {}corchetes y piensa que n: ies una etiqueta: construcción de declaración ; el punto y coma es opcional, por lo que no se queja.

Si agrega otra propiedad al objeto, finalmente arrojará un error.

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

Actualización 2019

Ejecuté el mismo código que @rjloura en mi nodo OSX High Sierra 10.13.6 versión 10.13.0 y estos son los resultados

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

El uso de la memoria es diferente si crea 10 mil instancias. new Object()solo conservará una copia y {}conservará 10 mil copias.