Поднимите свои навыки до освоения литералов объектов, фабричных функций и функций конструктора.

Вы изо всех сил пытаетесь создавать объекты в JavaScript? Когда я начал программировать, я определенно был таким.

Объект — это мощный и часто используемый тип данных в JavaScript. Это набор пар ключ-значение, и вы можете представлять сложные структуры данных.

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

К концу этой статьи у вас будет четкое представление о различных подходах и о том, когда их использовать. Готовы ли вы изучить различные способы создания объектов в JavaScript? Давайте погрузимся!

1. Литералы объекта

Использование литералов объектов — это простой способ создать новый объект. Вам понадобится следующий синтаксис: добавьте пары ключ-значение, разделенные запятой, и заключите их в фигурные скобки {} .

const cat1 = {
  name: 'Kaspar',
  birthYear: 2018,
  currentYear: 2023,
  colors: ['white', 'orange'],
  calculateHumanAge: function () {
    return (this.currentYear - this.birthYear) / 3;
  },
};

Преимущества:

  • Простой и быстрый способ определить один объект

Недостатки:

  • Нельзя использовать повторно: с помощью литералов объектов вы можете создавать одноразовые объекты, но они не действуют как шаблоны. Не рекомендуется, если вам нужно большое количество однотипных объектов.
  • Дублированный код: если у объекта есть поведение — например, функция calculateHumanAge() — и позже мы обнаруживаем, что у нас есть ошибка, нам нужно изменить код в нескольких местах.

2. Заводская функция

Фабричные функции позволяют создавать повторно используемые объекты. Когда они вызываются, они возвращают объект с определенными свойствами и методами.

function createCat(name, birthYear, currentYear, colors,
) {
  return {
    name,
    birthYear,
    currentYear,
    colors,
    calculateHumanAge: function () {
      return (this.currentYear - this.birthYear) / 3;
    },
  };
}

const cat1 = createCat('Kaspar', 2018, 2023, ['white', 'orange']);

В этом примере видно, что фабричная функция createCat() возвращает новый объект со свойствами и сохраняет его в переменной cat1.

Преимущества:

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

3. Функция конструктора

Функция-конструктор работает аналогично фабричной функции, поскольку с ее помощью вы можете создавать повторно используемые объекты. Разница в том, что функции-конструктору не нужно явно возвращать объект, так как ключевое слово new создает и неявно возвращает новый объект.

function Cat(name, birthYear, currentYear, colors,
) {
  this.name = name;
  this.birthYear = birthYear;
  this.currentYear = currentYear;
  this.colors = colors;
  this.calculateHumanAge = function () {
    return (this.currentYear - this.birthYear) / 3;
  };
}

const cat1 = new Cat('Kaspar', 2018, 2023, ['white', 'orange']);

В этом примере мы вызываем функцию createCat() с ключевым словом new.

  1. Ключевое слово new создает новый объект, который пока пуст.
  2. Он также отвечает за установку ключевого слова this для вновь созданного объекта на шаге 1. (Без ключевого слова new ключевое слово this будет ссылаться на глобальный объект, а не на новый объект, что может привести к ошибкам и неожиданному поведению.)
  3. Затем функция-конструктор добавляет определенные свойства и методы к нашему новому объекту.
  4. Вы могли заметить, что у нас нет ключевого слова return. В этом нет необходимости, так как ключевое слово new неявно возвращает объект.
  5. Новый объект присваивается переменной cat1.

Преимущества:

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

Недостатки:

  • Если вы забудете использовать ключевое слово new, вы можете столкнуться с нежелательным поведением.

Краткое содержание

Существуют различные шаблоны для создания нового объекта в JavaScript, которые помогают писать более чистый и эффективный код. В зависимости от ваших потребностей и предполагаемой возможности повторного использования объекта один подход может подойти лучше, чем другой.

Хотите быстро создать объект без методов? Затем вы можете перейти к литералу объекта.

Вы собираетесь создать несколько более сложный объект с методами и использовать его повторно? Затем вы можете использовать функцию фабрики или конструктора, чтобы избежать дублирования кода.

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

Давай останемся на связи!

Подпишитесь на мою рассылку, и давайте поможем друг другу добиться успеха в веб-разработке. Если вы только начинаете, пытаетесь переключиться на веб-разработку или хотите расширить свои знания в области HTML, CSS и JavaScript, мой информационный бюллетень — идеальный ресурс. Зарегистрируйтесь бесплатно здесь.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .