Як створювати об’єкти в JavaScript

Ми всі маємо справу з об’єктами так чи інакше під час написання коду мовою програмування. У JavaScript об’єкти надають нам можливість зберігати, маніпулювати та надсилати дані через мережу.

Існує багато способів, якими об’єкти в JavaScript відрізняються від об’єктів в інших основних мовах програмування, таких як Java. Я спробую висвітлити це в іншій темі. Тут зупинимось лише на різних способах, за допомогою яких JavaScript дозволяє нам створювати об’єкти.

У JavaScript розглядайте об'єкти як набір пар "ключ: значення". Це дає нам перший і найпопулярніший спосіб створення об’єктів у JavaScript.

Почнемо це.

1. Створення об’єктів за допомогою синтаксису об’єктного літералу

Це насправді просто. Все, що вам потрібно зробити, - це викинути пари значень ключа, розділені символом ':', у набір фігурних дужок ({}), і ваш об’єкт готовий до обслуговування (або споживання), як показано нижче:

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

Це найпростіший і найпопулярніший спосіб створення об’єктів у JavaScript.

2. Створення об'єктів за допомогою ключового слова 'new'

Цей спосіб створення об'єктів нагадує спосіб створення об'єктів на мовах, що базуються на класах, таких як Java. До речі, починаючи з ES6, класи також є вихідними для JavaScript, і ми розглянемо створення об'єктів, визначаючи класи в кінці цієї статті. Отже, щоб створити об’єкт за допомогою ключового слова 'new', вам потрібно мати функцію конструктора.

Ось два способи використання "нового" шаблону ключових слів -

а) Використання ключового слова 'new' із вбудованою функцією конструктора об'єктів

Щоб створити об'єкт, використовуйте нове ключове слово з Object()конструктором, наприклад:

const person = new Object();

Тепер, щоб додати властивості до цього об’єкта, нам потрібно зробити щось подібне:

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

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

b) Використання 'new' із визначеною користувачем функцією конструктора

Інша проблема підходу до використання функції конструктора 'Object' виникає внаслідок того, що кожного разу, коли ми створюємо об'єкт, ми повинні вручну додавати властивості до створеного об'єкта.

Що, якби нам довелося створити сотні об’єктів людини? Ви можете собі уявити біль зараз. Отже, щоб позбутися вручну додавання властивостей до об’єктів, ми створюємо власні (або визначені користувачем) функції. Спочатку ми створюємо функцію конструктора, а потім використовуємо ключове слово 'new' для отримання об'єктів:

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

Тепер, будь-коли, коли вам потрібен об’єкт „Person”, просто виконайте такі дії:

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

3. Використання Object.create () для створення нових об’єктів

Цей шаблон дуже корисний, коли нас просять створювати об'єкти з інших існуючих об'єктів, а не безпосередньо з використанням синтаксису ключового слова "new". Давайте подивимося, як використовувати цей шаблон. Як зазначено в MDN:

Object.create()Метод створює новий об'єкт, використовуючи існуючий об'єкт в якості прототипу новоствореного об'єкта.

Щоб зрозуміти 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 () для створення нових об’єктів

Що робити, якщо ми хочемо створити об’єкт, який повинен мати властивості з кількох об’єктів? Object.assign()приходить до нас на допомогу.

Як зазначено в MDN:

Метод використовується для копіювання значення всіх перелічуваних власних властивостей з одного або декількох об'єктів джерела до цільового об'єкту. Він поверне цільовий об'єкт.Object.assign()

Object.assignМетод може приймати в якості параметрів будь-яку кількість об'єктів. Перший параметр - це об’єкт, який він створить і поверне. Решта переданих йому об’єктів буде використано для копіювання властивостей у новий об’єкт. Давайте зрозуміємо це, продовживши попередній приклад, який ми бачили.

Припустимо, у вас є два об’єкти, як показано нижче:

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

Тепер вам потрібен об'єкт працівника "ABC Corp", який керує автомобілем "Ford". Ви можете зробити це за допомогою, Object.assignяк показано нижче:

const employee = Object.assign({}, orgObject, carObject);

Тепер ви отримуєте employeeоб’єкт, який має companyі carNameяк його властивість.

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

5. Використання класів ES6 для створення об’єктів

Ви помітите, що цей метод подібний до використання 'new' із визначеною користувачем функцією конструктора. Функції конструктора тепер замінені класами, оскільки вони підтримуються специфікаціями 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. Сподіваюся, вам сподобався цей пост і тепер ви розумієте, як створювати об’єкти.

Дякуємо за час, що прочитали цю статтю. Якщо вам сподобався цей допис, і він був для вас корисним, клацніть на плескання? , щоб показати свою підтримку. Продовжуйте вчитися більше!