Qual é a diferença entre `new Object ()` e notação literal de objeto?

Qual é a diferença entre esta sintaxe baseada em construtor para criar um objeto:

person = new Object()

... e esta sintaxe literal:

person = {
    property1 : "Hello"
};

Parece que os dois fazem a mesma coisa, embora o JSLint prefira o uso da notação literal do objeto.

Qual deles é melhor e por quê?

Ambos fazem a mesma coisa (a menos que alguém tenha feito algo incomum), exceto que o seu segundo cria um objeto e adiciona uma propriedade a ele. Mas a notação literal ocupa menos espaço no código fonte. É claramente reconhecível o que está acontecendo; portanto, usando new Object(), você está apenas digitando mais e (em teoria, se não for otimizado pelo mecanismo JavaScript), fazendo uma chamada de função desnecessária.

Estes

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

person = {
    property1 : "Hello"
};

tecnicamente, não faça a mesma coisa. O primeiro apenas cria um objeto. O segundo cria um e atribui uma propriedade. Para que o primeiro seja o mesmo, você precisará de uma segunda etapa para criar e atribuir a propriedade.

O "algo incomum" que alguém poderia fazer seria sombrear ou atribuir ao Objectglobal padrão :

// Don't do this
Object = 23;

Nesse caso altamente incomum , new Objectfalhará, mas {}funcionará.

Na prática, nunca há uma razão para usar new Objectem vez de {}(a menos que você tenha feito essa coisa muito incomum).

Não há diferença para um objeto simples sem métodos, como no seu exemplo. No entanto, há uma grande diferença quando você começa a adicionar métodos ao seu objeto.

Maneira literal:

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

Maneira do protótipo:

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

Ambas as formas permitem a criação de instâncias Objcomo esta:

var foo = new Obj( "hello" ); 

No entanto, com a maneira literal, você carrega uma cópia do sayHellométodo dentro de cada instância de seus objetos. Enquanto que, da maneira do protótipo, o método é definido no protótipo do objeto e compartilhado entre todas as instâncias do objeto. Se você tem muitos objetos ou muitos métodos, a maneira literal pode levar a um desperdício de memória bastante grande.

Em JavaScript, podemos declarar um novo objeto vazio de duas maneiras:

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

Não encontrei nada que sugira que haja alguma diferença significativa com relação à maneira como eles operam nos bastidores (por favor, corrija-me se estiver errado - adoraria saber). No entanto, o segundo método (usando a notação literal do objeto) oferece algumas vantagens.

1. É mais curto (10 caracteres para ser mais preciso)
2. É mais fácil e mais estruturado para criar objetos em tempo real
3. Não importa se algum bufão substituiu inadvertidamente o objeto

Considere um novo objeto que contém os membros Name e TelNo. Usando a nova convenção Object (), podemos criá-la assim:

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

O recurso Expando Properties do JavaScript nos permite criar novos membros dessa maneira em tempo real, e alcançamos o que pretendíamos. No entanto, esse caminho não é muito estruturado ou encapsulado. E se quiséssemos especificar os membros na criação, sem precisar confiar nas propriedades expando e na pós-criação da atribuição?

É aqui que a notação literal do objeto pode ajudar:

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

Aqui alcançamos o mesmo efeito em uma linha de código e significativamente menos caracteres.

Uma discussão adicional sobre os métodos de construção de objetos acima pode ser encontrada em: JavaScript e Object Oriented Programming (OOP).

E, finalmente, o que dizer do idiota que substituiu Object? Você achou que não era possível? Bem, esse JSFiddle prova o contrário. O uso da notação literal de objeto nos impede de cair em desgraça com esse bufão.

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

Na minha máquina usando o Node.js, executei o seguinte:

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

Observe que esta é uma extensão do que é encontrado aqui: Por que arr = [] é mais rápido que arr = new Array?

minha saída foi a seguinte:

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

tão claramente {} e [] são mais rápidos que usar new para criar objetos / matrizes vazios.

Todo mundo aqui está falando sobre as semelhanças dos dois. Vou apontar as diferenças.

1. Usar new Object()permite passar outro objeto. O resultado óbvio é que o objeto recém-criado será definido com a mesma referência. Aqui está um código de exemplo:

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

2. O uso não se limita aos objetos, como nos objetos OOP. Outros tipos também podem ser passados ​​para ele. A função definirá o tipo de acordo. Por exemplo, se passarmos o número 1 para ele, um objeto do tipo número será criado para nós.

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

3. O objeto criado usando o método acima ( new Object(1)) seria convertido em tipo de objeto se uma propriedade fosse adicionada a ele.

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

4. Se o objeto for uma cópia de uma classe filho de objeto, poderíamos adicionar a propriedade sem a conversão 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

Na verdade, existem várias maneiras de criar objetos em JavaScript. Quando você deseja apenas criar um objeto, não há benefício em criar objetos " baseados em construtores " usando o operador " novo ". É o mesmo que criar um objeto usando a sintaxe " literal de objeto ". Mas os objetos " baseados em construtores " criados com o operador " novo " são de uso incrível quando você pensa em " herança prototípica ". Você não pode manter a cadeia de herança com objetos criados com sintaxe literal. Mas você pode criar uma função de construtor , anexar propriedades e métodos ao seu protótipo."operador, ele retornará um objeto que terá acesso a todos os métodos e propriedades anexados ao protótipo dessa função construtora.

Aqui está um exemplo de criação de um objeto usando a função construtora (consulte a explicação do código na 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();

Agora, você pode criar quantos objetos quiser, instanciando a função de construção Person e todos eles herdarão fullname () dela.

Nota: a palavra-chave " this " se refere a um objeto vazio dentro de uma função construtora e sempre que você cria um novo objeto a partir de Person usando o operador " new ", ele retorna automaticamente um objeto que contém todas as propriedades e métodos anexados à palavra-chave " this " . E esses objetos certamente herdarão os métodos e propriedades anexados ao protótipo da função construtora Person (que é a principal vantagem dessa abordagem).

A propósito, se você deseja obter a mesma funcionalidade com sintaxe " literal de objeto ", teria que criar fullname () em todos os objetos, como abaixo:

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 fim, se você agora perguntar por que devo usar a abordagem da função construtora em vez da abordagem literal do objeto :

*** A herança prototípica permite uma cadeia simples de herança que pode ser imensamente útil e poderosa.

*** Economiza memória ao herdar métodos e propriedades comuns definidos no protótipo de funções do construtor. Caso contrário, você teria que copiá-los repetidamente em todos os objetos.

Espero que isto faça sentido.

Além disso, de acordo com alguns dos livros de javascript O'Really .... (citado)

Outro motivo para usar literais em oposição ao construtor Object é que não há resolução de escopo. Como é possível que você tenha criado um construtor local com o mesmo nome, o intérprete precisa procurar a cadeia de escopos do local que você está chamando Object () até encontrar o construtor global Object.

Eu encontrei uma diferença, para ES6 / ES2015. Você não pode retornar um objeto usando a sintaxe da função de seta abreviada, a menos que o rodeie 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 } ]

Isso ocorre porque o compilador está confuso {}entre colchetes e pensa que n: ié um rótulo: statement construto de ; o ponto e vírgula é opcional, portanto, não se queixa.

Se você adicionar outra propriedade ao objeto, ele emitirá um erro.

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

Atualização de 2019

Executei o mesmo código que @rjloura no meu OSX High Sierra 10.13.6, versão 10.13.0, e estes são os 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

O uso da memória é diferente se você criar 10 mil instâncias. new Object()manterá apenas uma cópia e {}10 mil cópias.