Об’єкти є однією з найважливіших і найпотужніших функцій JavaScript, і в багатьох вбудованих функціях об’єкти використовують за замовчуванням.
По суті, об’єкт — це сукупність властивостей, а властивість складається з ключа (ідентифікатора) та значення. У цьому сенсі об’єкти в JavaScript схожі на асоціативні масиви в PHP, але на цьому схожість закінчується.
В попередньому уроці ми розглянули змінні в 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 часто криється величезна сила.
Давайте трохи повернемося назад і навчимося створювати прості об’єкти та керувати ними. Ось основні правила щодо об’єктів:
об’єкт{…}
;
Тепер давайте створимо більш складний тестовий об’єкт, що буде містити деяку корисну інформацію, якою ми будемо маніпулювати:
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, щоб отримати необхідну для повного прочитання книги кількість годин.
Наразі наш код вище непоганий, але він може бути набагато кращим. Наприклад, коли нам потрібно буде створити кілька об’єктів з однаковою структурою. Тут на допомогу і приходять конструктори. Якщо ви знайомі з об’єктно-орієнтованим 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 і дізналися, як почати з ними працювати. На прикладах побачили, як можна використовувати об’єкти для створення структур даних, з акуратним, зрозумілим і гнучким кодом. Також оглянули основи та приклад використання конструкторів в об’єктах Яваскрипт.
Чи був цей урок корисним для вас? Дайте нам знати про це в розділі коментарів нижче.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…