Создание объектов в JavaScript: Object.create() vs new Function()

Быстрый ответ

Object.create(proto) позволяет непосредственно контролировать прототип создаваемого объекта, при этом не вызывая конструктор. В свою очередь, new Constructor() генерирует объект посредством функции Constructor, наделяя его свойствами и методами и устанавливая автоматическую связь прототипа объекта с Constructor.prototype.

Для наглядности рассмотрим пример:

Object.create():

const proto = { привет: () => 'Привет!' }; // Наследуем от прототипа
const obj = Object.create(proto); // Наследуем метод 'привет'
console.log(obj.привет()); // Вывод: 'Привет!'

new Constructor():

function Приветствие() {
  this.привет = () => 'Привет мир!'; // Конструктор инициализирует свойство
}
const obj = new Приветствие(); // Создаём новый экземпляр объекта Приветствие
console.log(obj.привет()); // Вывод: 'Привет мир!'

При использовании Object.create() свойства и методы наследуются от прототипа. Однако, конструктор new создаёт объект в соответствии с определённым шаблоном.

Когда это важно: выбор между "new" и "Object.create()"

Когда запуск логики конструктора необходим — например, для инициализации первоначального состояния объекта или его методов, используйте new SomeFunction(). В то время как для создания цепочек наследования без потенциальных сайд-эффектов конструктора подойдёт Object.create().

Object.create(null) позволяет создать объект без прототипа, что в сравнении с new SomeFunction() обеспечивает "чистый старт", без дополнительного обнуления прототипа.

При работе с дескрипторами свойств или создании замыканий предпочтительнее использовать Object.create(), он обеспечивает более глубокий контроль над процессом, чем автоматическая настройка при использовании new SomeFunction().

Погружение в возможности Object.create(): Изучаем создание объектов без конструктора

Object.create() дает возможность создать объект непосредственно на основе другого объекта, избегая возможных побочных эффектов от конструктора. Данный метод также позволяет организовывать замыкание внутри объекта, пряча личные данные внутри его структуры.

Это различие важно для особенностей ECMAScript 5, в котором был представлен Object.create() для максимально гибкого прототипного наследования, что безусловно расширило возможности в сравнении с линейным наследованием, реализуемым через new.

Наследование против экземпляра: различаем цели создания объекта

При необходимости создать полностью новый экземпляр объекта с индивидуальной настройкой используйте new SomeFunction(). В случае, когда задачей является связывание объекта с определённым прототипом или создание полностью пустого объекта, примените Object.create().

Выбор между управлением наследованием через Object.create() или созданием уникальных экземпляров посредством конструктора с new SomeFunction(), зависит от того, насколько выбранный подход соответствует архитектуре и дизайну вашего приложения.

Визуализация

Воспринимайте Object.create() как художника, вносящего собственные детали в уже созданную структуру:

Существующая форма (📏): { основа, текстура }

Object.create(📏) = Детализация знакомой структуры

Творческая работа художника (📏+🖌👨‍🎨): { основа, текстура, особенности }

new SomeFunction(), можно сравнить с созданием костюма по индивидуальным меркам (🕴️), включающего в себя и личные детали заказчика:

Примерный крой (📏): { материал, фасон, стиль }

new BespokeSuit(📏) = Адаптация под ваши предпочтения, добавление персональных элементов

Ваш индивидуальный костюм (🕴️): { материал, фасон, стиль, индивидуальные требования }

Оба метода гибки, но если художник добавляет детали к уже существующей структуре, то костюм на заказ — это полностью персонализированный продукт, готовый к дополнительным модификациям.

Реальные примеры использования и код

Такие современные фреймворки, как Vue.js, используют Object.create() для интеграции общих прототипов и предотвращения их повторного переопределения. В то же время React.js применяет new для создания экземпляров, где главное внимание уделяется инициализации компонентов и работе со состоянием.

Возьмём пример использования Object.create(null), который позволяет получить пустой объект и избегать ошибок наследования свойств при создании "чистых" хранилищ данных:

let map = Object.create(null);
map['123'] = 'значение';
console.log(map['123']); // значение
console.log(map.hasOwnProperty('123')) // Ошибка: map.hasOwnProperty is not a function.
// Таким образом, нет лишних издержек на прототипные свойства!

С другой стороны, new станет наиболее предпочтительным вариантом при создании ORM моделей или сервисных объектов в серверном JavaScript на базе Node.js, где используются классы-конструкторы:

class БазаДанных {
  constructor(url) {
    this.url = url; // конструктор задаёт начальное состояние.
  }
}
const db = new БазаДанных('mongodb://localhost:27017');
console.log(db.url); // mongodb://localhost:27017

Поддержка в браузерах и совместимость

Object.create() был введён в ECMAScript 5, что требует учета его совместимости с различными средами JavaScript. Сегодня он поддерживается почти повсеместно, но в устаревших системах использование полифиллов может быть необходимо. В то время как new отличается прочной надёжностью, будучи частью JavaScript с самого его появления.

Продвинутые инструменты для объектно-ориентированного JavaScript

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

Полезные материалы

1. Object.create() – JavaScript | MDN — официальная документация MDN по Object.create().
2. new – JavaScript | MDN — детальное руководство MDN по оператору new в JavaScript.
3. Прототипное наследование — понимание прототипного наследования в JavaScript, включая Object.create() и new.
4. JavaScript – Понимание разницы между Object.create() и new SomeFunction() – Stack Overflow — обсуждение разницы между Object.create() и new с точки зрения профессионального сообщества.
5. Модели | DigitalOcean — глубокое обсуждение конструкторов в JavaScript, прототипов и ключевого слова new.
6. Сокрытые сокровища объектной композиции | by Eric Elliott | JavaScript Scene | Medium — анализ преимуществ объектной композиции перед классическим наследованием.
7. Предложение ES: поля классов — статья о предложенных полях классов в JavaScript и их связи с прототипным наследованием.