Короткий опис об’єктно-орієнтованого програмування (ООП) в JavaScript

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

Об’єктно-орієнтоване програмування в JavaScript сильно відрізняється від об’єктно-орієнтованого програмування в інших мовах. І в сьогоднішній статті ми коротко розглянемо основи об’єктно-орієнтованого програмування (ООП) в JavaScript.

Що таке об’єктно-орієнтоване програмування в JavaScript

Об’єктно-орієнтоване програмування – це дві складові: створення окремих об’єктів із загального об’єкта та успадкування. У сьогоднішній статті ми розглянемо тільки першу складову, а успадкування ми розглянемо в наступних статтях.

Створення окремих об’єктів із загального об’єкта

Об’єкти в JavaScript мають властивості і методи. Ці об’єкти можна співвіднести з реальними речами (і навіть людьми!). Припустимо, вам потрібно створити об’єкт для опису людини за допомогою JavaScript. У людини є ім’я, прізвище та вік. Ви можете додати ці атрибути як властивості в JavaScript. Для того, щоб людина представлялася, можна використовувати функцію, за допомогою якої вона буде називати своє ім’я. І ця функція буде методом в об’єкті.

Нижче невеликий приклад цього:

<script>
const lyudina = {
 firstName: 'Ivan',
 lastName: 'Ivanov',
 age: 35,
 sayName() {
  console.log(lyudina.firstName + ' ' + lyudina.lastName);
 }
}
lyudina.sayName(); // Ivan Ivanov
</script>

Оскільки люди дуже схожі один на одного, ви також можете створити інший об’єкт lyudina з такими ж властивостями (firstName, lastName, age) і методами (скажімо, sayName).

Для інших об’єктів вам потрібно буде використовувати іншу назву, оскільки змінна lyudina вже зайнята. І, швидше за все, називати змінні людськими іменами було б більш розумним. Тобто, замість lyudina і lyudina2, має сенс називати їх, наприклад, ivanov і petrov.

А що, якщо вам потрібно створити об’єкт ще для однієї людини? Вам доведеться копіювати весь цей об’єкт і замінювати деякі значення, але це ж втомлює, вірно? Доводиться копіювати стільки коду!

Люди трохи відрізняються один від одного – у нас різні імена, і ми різного віку. Але у нас є спільна риса – ми можемо назвати своє ім’я. Для цього ми можемо створити функцію, яка буде відповідати за це. І для цього будемо використовувати ключове слово this, яке буде приймати свої значення для кожного нового об’єкта.

Ось як це може виглядати:

<script>
function Lyudina(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 this.sayName = function() {
  console.log(firstName + ' ' + lastName + ' ' + age);
 }
}
// створюємо новий екземпляр 'людини' за допомогою ключового слова 'new'
const ivanov = new Lyudina('Ivan', 'Ivanov', 35);
ivanov.sayName(); // Ivan Ivanov 35
</script>

Непогано, чи не так?

В цьому і полягає суть об’єктно-конструкторської частини об’єктно-орієнтованого програмування – ви створюєте функцію або метод (Lyudina), яка може створювати екземпляри (такі як ivanov і petrov). Кожен створюваний екземпляр буде мати змогу містити окремі дані, які відрізняються від інших екземплярів.

Функція (метод), яку ви використовуєте для створення екземплярів, називається конструктором.

Іменування конструкторів і екземплярів

В об’єктно-орієнтованому програмуванні перша буква конструктора пишеться з великої літери (Lyudina), а кожен екземпляр записується як звичайна змінна (ivanov, petrov).

Ця невелика різниця відразу показує різницю між конструкторами і екземплярами в вашому коді.

Що таке this?

this – це ключове слово в JavaScript. Коли воно використовується в конструкторі, воно посилається на екземпляр, створений за допомогою конструктора. Тобто, ключове слово this в конструкторі вказує на його екземпляр.

Короткий підсумок

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

Коли ви створюєте конструктор, ви повинні використовувати першу велику літеру його назви (наприклад, Lyudina), щоб відрізняти його від екземплярів (наприклад, ivanov).

Читати далі: Ознайомлення з класами в JavaScript