В чем разница между `new Object ()` и литеральной нотацией объекта?

В чем разница между этим основанным на конструкторе синтаксисом для создания объекта:

person = new Object()

... и этот буквальный синтаксис:

person = {
    property1 : "Hello"
};

Похоже, что оба делают одно и то же, хотя JSLint предпочитает использовать буквенное обозначение объекта.

Какой из них лучше и почему?

Они оба делают одно и то же (если кто-то не сделал что-то необычное), за исключением того, что ваш второй создает объект и добавляет к нему свойство. Но буквенная запись занимает меньше места в исходном коде. Понятно, что происходит, поэтому, используя new Object(), вы на самом деле просто набираете больше и (теоретически, если не оптимизируется движком JavaScript) выполняете ненужный вызов функции.

Эти

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

person = {
    property1 : "Hello"
};

технически не делайте то же самое. Первый просто создает объект. Второй создает один и назначает свойство. Чтобы первый был одинаковым, вам потребуется второй шаг для создания и назначения свойства.

«Что-то необычное», что кто-то может сделать, это скрыть или назначить Objectглобальный по умолчанию :

// Don't do this
Object = 23;

В этом крайне необычном случае new Objectне {}получится, но сработает.

На практике никогда не бывает причин использовать, new Objectа не {}(если вы не сделали эту очень необычную вещь).

Для простого объекта без методов нет разницы, как в вашем примере. Однако есть большая разница, когда вы начинаете добавлять методы к вашему объекту.

Буквальный путь:

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

Способ прототипа:

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

Оба способа позволяют создавать экземпляры Objвроде этого:

var foo = new Obj( "hello" ); 

Тем не менее, в буквальном смысле, вы несете копию sayHelloметода в каждом экземпляре ваших объектов. Принимая во внимание, что при использовании способа прототипа метод определяется в прототипе объекта и используется всеми экземплярами объекта. Если у вас много объектов или методов, буквальный путь может привести к довольно большой трате памяти.

В JavaScript мы можем объявить новый пустой объект двумя способами:

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

Я не нашел ничего, что могло бы предположить, что есть какая-то существенная разница между этими двумя в том, как они работают за кулисами (пожалуйста, поправьте меня, если я ошибаюсь - я хотел бы знать). Однако второй метод (с использованием буквенной нотации объекта) предлагает несколько преимуществ.

1. Это короче (10 символов, если быть точным)
2. Это проще и более структурировано для создания объектов на лету
3. Неважно, если какой-то шут случайно переопределил объект

Рассмотрим новый объект, который содержит члены Name и TelNo. Используя новое соглашение Object (), мы можем создать его следующим образом:

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

Функция Expando Properties в JavaScript позволяет нам создавать новых участников таким образом на лету, и мы достигаем того, что намеревались. Однако этот способ не очень структурирован и не заключен в капсулу. Что если мы захотим указать членов при создании, не полагаясь на свойства expando и назначение после создания?

Вот где могут помочь буквенные обозначения объекта:

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

Здесь мы добились того же эффекта в одной строке кода и значительно меньше символов.

Дальнейшее обсуждение методов конструирования объектов выше можно найти по адресу: JavaScript и объектно-ориентированное программирование (ООП).

И, наконец, что за идиот, который отверг Объект? Вы думали, что это невозможно? Ну, этот JSFiddle доказывает обратное. Использование буквенных обозначений объекта не позволяет нам осквернить эту буффонаду.

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

На моей машине с помощью Node.js я запустил следующее:

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

Обратите внимание, это расширение того, что находится здесь: почему arr = [] быстрее, чем arr = new Array?

мой вывод был следующим:

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

так ясно, что {} и [] быстрее, чем использование new для создания пустых объектов / массивов.

Все здесь говорят о сходстве двух. Я собираюсь указать на различия.

1. Использование new Object()позволяет передавать другой объект. Очевидным результатом является то, что вновь созданный объект будет установлен на ту же ссылку. Вот пример кода:

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

2. Использование не ограничено объектами, как в объектах ООП. Другие типы могут быть переданы ему тоже. Функция установит тип соответственно. Например, если мы передадим ему целое число 1, для нас будет создан объект типа номер.

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

3. Объект, созданный с использованием вышеуказанного метода ( new Object(1)), будет преобразован в тип объекта, если к нему добавлено свойство.

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

4. Если объект является копией дочернего класса объекта, мы могли бы добавить свойство без преобразования типа.

   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

На самом деле, есть несколько способов создания объектов в JavaScript. Когда вы просто хотите создать объект, нет смысла создавать объекты на основе конструктора, используя оператор « new ». Это то же самое, что создание объекта с использованием синтаксиса « object literal ». Но « основанные на конструкторе » объекты, созданные с помощью оператора « new », находят невероятное применение, когда вы думаете о « наследовании прототипа ». Вы не можете поддерживать цепочку наследования с объектами, созданными с буквальным синтаксисом. Но вы можете создать функцию конструктора , прикрепить свойства и методы к ее прототипу.msgstr "Оператор возвращает объект, который будет иметь доступ ко всем методам и свойствам, связанным с прототипом этой функции конструктора.

Вот пример создания объекта с использованием функции конструктора (см. Объяснение кода внизу):

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

Теперь вы можете создать столько объектов, сколько захотите, создав экземпляр конструкторской функции Person, и все они унаследуют от нее fullname ().

Примечание. Ключевое слово « this » будет ссылаться на пустой объект в функции-конструкторе, и всякий раз, когда вы создаете новый объект из Person с помощью оператора « new », оно автоматически возвращает объект, содержащий все свойства и методы, связанные с ключевым словом « this ». , И эти объекты наверняка унаследуют методы и свойства, связанные с прототипом функции конструктора Person (что является основным преимуществом этого подхода).

Кстати, если вы хотите получить ту же функциональность с синтаксисом « object literal », вам придется создать fullname () для всех объектов, как показано ниже:

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

Наконец, если вы сейчас спросите, почему я должен использовать подход с использованием функции конструктора вместо объектного литерального подхода:

*** Прототип наследования позволяет простую цепочку наследования, которая может быть очень полезной и мощной.

*** Это экономит память путем наследования общих методов и свойств, определенных в прототипе функций конструктора. В противном случае вам придется копировать их снова и снова во всех объектах.

Я надеюсь это имеет смысл.

Кроме того, согласно некоторым книгам О'Рейли на JavaScript ... (цитируется)

Другая причина использования литералов в отличие от конструктора Object - отсутствие разрешения области видимости. Поскольку возможно, что вы создали локальный конструктор с тем же именем, интерпретатору необходимо искать цепочку областей действия от места, где вы вызываете Object (), до тех пор, пока он не найдет глобальный конструктор Object.

Я нашел одно отличие, для ES6 / ES2015. Вы не можете вернуть объект, используя синтаксис функции сокращенной стрелки, если не окружите объект 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 } ]

Это потому, что компилятор смущен {}скобками и думает, что n: iэто метка: оператор construct; точка с запятой необязательна, поэтому не жалуется на это.

Если вы добавите другое свойство к объекту, оно, наконец, выдаст ошибку.

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

2019 Обновление

Я выполнил тот же код, что и @rjloura, на моем узле OSX High Sierra 10.13.6 версии 10.13.0, и вот результаты

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

Использование памяти отличается, если вы создаете 10 тысяч экземпляров. new Object()останется только одна копия, а {}будет 10 тысяч копий.