Об’єкти є однією з найважливіших і найпотужніших функцій 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 і дізналися, як почати з ними працювати. На прикладах побачили, як можна використовувати об’єкти для створення структур даних, з акуратним, зрозумілим і гнучким кодом. Також оглянули основи та приклад використання конструкторів в об’єктах Яваскрипт.
Чи був цей урок корисним для вас? Дайте нам знати про це в розділі коментарів нижче.
Потрібно більше інформації?
