Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 17.04.2024)
456050
осіб
347
літаків
325
гелікоптерів
7193
танків
13827
ББМ
11624
артилерія
760
ППО
1046
РСЗВ
15587
машин
26
кораблі і катери
Уроки JavaScript — як почати працювати з об’єктами
Опубліковано

Уроки 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 і дізналися, як почати з ними працювати. На прикладах побачили, як можна використовувати об’єкти для створення структур даних, з акуратним, зрозумілим і гнучким кодом. Також оглянули основи та приклад використання конструкторів в об’єктах Яваскрипт.

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *