Уроки JavaScript — як почати працювати з об’єктами

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

По суті, об’єкт — це сукупність властивостей, а властивість складається з ключа (ідентифікатора) та значення. У цьому сенсі об’єкти в JavaScript схожі на асоціативні масиви в PHP, але на цьому схожість закінчується.

В попередньому уроці ми розглянули змінні в JavaScript — основні моменти їх використання. В цьому практичному уроці ми зосередимося на основних моментах щодо об’єктів JavaScript та принципами роботи з ними. Ми розглянемо основи, для яких потрібна наявність базових практичних знань JavaScript. Якщо вам потрібна допомога з цим, перегляньте наші попередні уроки з програмування на яваскрипті.

Що таке об’єкти JavaScript

Розглянемо простий приклад об’єкта person в JavaScript:

let person = {
  name: "Petro",
  gender: "male",
  age: 40,
  worker: true
}

Це дуже простий об’єкт із чотирма властивостями. Перша властивість містить ключ «name» і значення «Petro». Як видно з властивостей прикладу, значення можуть використовувати багато різних типів даних (рядки, цілі числа, логічні і т.д.).

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

let person = {
  name: "Petro",
  greeting: function() {
    console.log("Aloha " + this.name + "!")
  }
};
person.greeting(); //Aloha Petro!

Даний об’єкт містить властивість greeting, значенням якої є функція. Нижче, після визначення функції і самого об’єкта, ми можемо викликати цю функцію за допомогою наступного синтаксису: {об’єкт}.{властивість об’єкта – функція}();. В нашому прикладі це виглядає так: person.greeting();. Якщо ви посилаєтеся на властивості з одного об’єкта, ви можете використовувати ключове слово this.

Якщо ви раніше працювали з об’єктами PHP, тут ідея дуже схожа. Проте, незважаючи на свою простоту, за синтаксисом об’єктів в JavaScript часто криється величезна сила.

Робота з JavaScript об’єктами

Давайте трохи повернемося назад і навчимося створювати прості об’єкти та керувати ними. Ось основні правила щодо об’єктів:

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

Тепер давайте створимо більш складний тестовий об’єкт, що буде містити деяку корисну інформацію, якою ми будемо маніпулювати:

let kniga = {
  type: 'book',
  title: 'Eneyida',
  author: 'Ivan Kotlyarevskiy',
  length: 303,
  'Ivan Kotlyarevskiy': {
    type: 'author',
    "first-name": 'Ivan',
    "last-name": 'Kotlyarevskiy'
  },
  price: 150,
  timeToRead: function() {
    return ( this.length * 1.25 / 60 + " hours" );
  }
}

Щоб отримати значення властивості, ви можете використовувати нотацію або крапкою, або квадратною дужкою, як показано в прикладі нижче:

console.log( kniga.type ); // book
console.log( kniga["title"] ); // Eneyida

Це виведе в консолі браузера тип та назву книги.

Подібним чином ми можемо звертатись до функції, що міститься в об’єкті, просто додавши дужки в кінці (і параметри, за потреби):

console.log( kniga.timeToRead() ); // 6.3125 hours
console.log( kniga['timeToRead']() ); // 6.3125 hours

В даному прикладі я використовую функцію timeToRead(), яка приблизно обчислює час, необхідний для прочитання книги. Відштовхуючись від того, що середня швидкість читання становить 120-200 слів за хвилину, — грубо кажучи потрібно 1,25 хвилини на сторінку (на сторінці приблизно 230-250 слів). Я помножив загальну кількість сторінок на 1,25, щоб отримати кількість хвилин, необхідних для повного прочитання. Потім хвилини ділю на 60, щоб отримати необхідну для повного прочитання книги кількість годин.

Використання конструкторів в об’єктах JavaScript

Наразі наш код вище непоганий, але він може бути набагато кращим. Наприклад, коли нам потрібно буде створити кілька об’єктів з однаковою структурою. Тут на допомогу і приходять конструктори. Якщо ви знайомі з об’єктно-орієнтованим PHP, використання конструкторів в об’єктах JavaScript схоже на використання класів і об’єктів у PHP. Основна мета конструкторів — зручно створювати об’єкти, повторно використовуючи код. Подумайте про конструктор, як про спосіб ініціалізації класу. Погляньте на приклад нижче, щоб побачити це наочно:

function Kniga( title, author ) {
  this.title = title;
  this.author = author;
  this.info = function() {
    return this.title + ' — ' + this.author;
  }
}
let kniga_1 = new Kniga( 'Eneyida', 'Ivan Kotlyarevskiy' );
let kniga_2 = new Kniga( 'Kaydasheva simya', 'Ivan Nechuy-Levitskiy' );
console.log( kniga_1.title );  // Eneyida
console.log( kniga_2.info() ); // Kaydasheva simya — Ivan Nechuy-Levitskiy

Конструктор — це функція, яка динамічно створює властивості для об’єкта. В прикладі конструктор призначає першому параметру значення this.title, а для другого — this.author. Він також створює функцію this.info, яка відображає назву та автора книги.

У функції ми можемо посилатися на властивості за допомогою ключового слова this. Поза функцією ми використовуємо крапкову нотацію. Принадність такого підходу полягає в можливості повторного використання. Ви можете створити скільки завгодно даних про книги, створивши новий об’єкт за допомогою класу Kniga, оголосивши його new Kniga();. Об’єкт міститиме всі функції та інші елементи, необхідні для функціонування.

Замість висновку

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

Чи був цей урок корисним для вас? Дайте нам знати про це в розділі коментарів нижче.

Теги: JavaScript