Поднимите свои навыки до освоения литералов объектов, фабричных функций и функций конструктора.
Вы изо всех сил пытаетесь создавать объекты в 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
.
- Ключевое слово
new
создает новый объект, который пока пуст. - Он также отвечает за установку ключевого слова
this
для вновь созданного объекта на шаге 1. (Без ключевого словаnew
ключевое словоthis
будет ссылаться на глобальный объект, а не на новый объект, что может привести к ошибкам и неожиданному поведению.) - Затем функция-конструктор добавляет определенные свойства и методы к нашему новому объекту.
- Вы могли заметить, что у нас нет ключевого слова
return
. В этом нет необходимости, так как ключевое словоnew
неявно возвращает объект. - Новый объект присваивается переменной
cat1
.
Преимущества:
- Простой способ создания повторно используемых объектов
- Один источник правды: если мы обнаружим ошибку в функции позже, у нас есть один источник, где мы можем ее исправить, и все объекты автоматически обновляются.
Недостатки:
- Если вы забудете использовать ключевое слово
new
, вы можете столкнуться с нежелательным поведением.
Краткое содержание
Существуют различные шаблоны для создания нового объекта в JavaScript, которые помогают писать более чистый и эффективный код. В зависимости от ваших потребностей и предполагаемой возможности повторного использования объекта один подход может подойти лучше, чем другой.
Хотите быстро создать объект без методов? Затем вы можете перейти к литералу объекта.
Вы собираетесь создать несколько более сложный объект с методами и использовать его повторно? Затем вы можете использовать функцию фабрики или конструктора, чтобы избежать дублирования кода.
И последнее, но не менее важное: знание различных способов создания объектов позволяет быстрее понимать чужой код.
Давай останемся на связи!
Подпишитесь на мою рассылку, и давайте поможем друг другу добиться успеха в веб-разработке. Если вы только начинаете, пытаетесь переключиться на веб-разработку или хотите расширить свои знания в области HTML, CSS и JavaScript, мой информационный бюллетень — идеальный ресурс. Зарегистрируйтесь бесплатно здесь.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .