Как создавать объекты в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Каашань Хуссейн

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

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

В JavaScript думайте о объектах как коллекции «Ключевых: значение» пар. Это приводит к нам первый и самый популярный способ создания объектов в JavaScript.

Давайте начать это началось.

1. Создание объектов с использованием объекта буквальный синтаксис

Это действительно просто. Все, что вам нужно сделать, это бросить свои пары значения ключевых значений, разделенные «:» внутри набора фигурных скобок ({}), и ваш объект готов к обслуживанию (или потреблен), как ниже:

const person = {
  firstName: 'testFirstName',
  lastName: 'testLastName'
};

Это самый простой и популярный способ создания объектов в JavaScript.

2. Создание объектов, используя ключевое слово «NEW»

Этот метод создания объекта напоминает, как объекты создаются в классовых языках, таких как Java. Кстати, начиная с ES6, классы ароматны для JavaScript, и мы посмотрим на создание объектов, определяя классы к концу этой статьи. Итак, чтобы создать объект, используя ключевое слово «Новое», вам необходимо иметь функцию конструктора.

Вот 2 способа, которыми вы можете использовать «новый» шаблон ключевых слов –

а) Использование ключевого слова «новое» с функцией созданного объекта конструктора

Чтобы создать объект, используйте новое ключевое слово с Объект () Конструктор, как это:

const person = new Object();

Теперь, чтобы добавить свойства на этот объект, мы должны сделать что-то подобное:

person.firstName = 'testFirstName';
person.lastName = 'testLastName';

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

б) Использование «нового» с функцией определенного пользователем конструктора

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

Что если бы нам пришлось создать сотни людей объектов? Вы можете представить боль сейчас. Таким образом, чтобы избавиться от вручную добавления свойств на объекты, мы создаем пользовательские (или пользовательские) функции. Сначала мы создаем функцию конструктора, а затем используйте ключевое слово «Новое», чтобы получить объекты:

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

Теперь, когда вы хотите, чтобы объект «лица», просто делай это:

const personOne = new Person('testFirstNameOne', 'testLastNameOne');
const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Использование Object.Create () Для создания новых объектов

Этот шаблон приходит очень удобно, когда нам просят создавать объекты из других существующих объектов, а не напрямую, используя «новый» синтаксис ключевых слов. Давайте посмотрим, как использовать этот шаблон. Как указано на MDN :

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

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

Представьте, что у вас есть организация, представленная orgobject.

const orgObject = { company: 'ABC Corp' };

И вы хотите создать сотрудников для этой организации. Очевидно, вы хотите, чтобы все объекты сотрудников.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });

console.log(employee); // { company: "ABC Corp" }
console.log(employee.name); // "EmployeeOne"

4. Использование Object.Assign () для создания новых объектов

Что, если мы хотим создать объект, который должен иметь свойства от более чем одного объекта? Объект.assign () приходит на нашу помощь.

Как указано на MDN :

Объект Отказ Назначить Метод может принимать любое количество объектов в качестве параметров. Первый параметр – это объект, который он создаст и возвращает. Остальные объекты, переданные ему, будут использоваться для копирования свойств в новый объект. Давайте понять это, продлевая предыдущий пример, который мы видели.

Предположим, у вас есть два объекта, как показано ниже:

const orgObject = { company: 'ABC Corp' }
const carObject = { carName: 'Ford' }

Теперь вы хотите, чтобы объект сотрудника «ABC Corp» приводит к себе «Форд». Вы можете сделать это с помощью Объект.assign Как показано ниже:

const.assign ({}, orgobject, carobject);

Теперь вы получаете сотрудник Объект, который имеет Компания и Карнама как его собственность.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. С помощью классов ES6 для создания объектов

Вы заметите, что этот метод аналогичен использованию «нового» с пользовательской функцией конструктора. Функции конструктора теперь заменяются на классы, поскольку они поддерживаются через спецификации ES6. Давайте посмотрим код сейчас.

class Person {
  constructor(fname, lname) {
    this.firstName = fname;
    this.lastName = lname;
  }
}

const person = new Person('testFirstName', 'testLastName');

console.log(person.firstName); // testFirstName
console.log(person.lastName); // testLastName

Это все способы, которыми я знаю, чтобы создать объекты в JavaScript. Я надеюсь, что вам понравился этот пост и теперь понимаю, как создавать объекты.

Спасибо за ваше время для чтения этой статьи. Если вам понравился этот пост, и вам было полезно, пожалуйста, нажмите на хлопок? Кнопка, чтобы показать вашу поддержку. Продолжайте учиться больше!