Короткий опис об’єктно-орієнтованого програмування (ООП) в 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

 

Recent Posts

Допомога при виборі та купівлі електрогенератора в Україні

В сучасному світі, в якому стабільність електропостачання є ключовим фактором комфорту та безперебійної роботи, наявність…

4 дні ago

Воррен Баффет

Навіть якщо ви дуже талановиті і докладаєте великих зусиль, для деяких результатів просто потрібен час:…

1 тиждень ago

Покрокова інструкція Імпорту даних з Excel в MySQL через phpMyAdmin

Цей практичний урок допоможе вам перенести дані з вашого Excel-файлу (з деякими конкретними стовпцями) до…

1 тиждень ago

Поширені міфи та помилки про пиво: відновлюємо справедливість

Пиво – один із найпопулярніших напоїв, який поряд з чаєм та кавою відомий у всіх…

1 тиждень ago

Уроки JavaScript — Короткі функції на заміну великому об’ємному коду

Досить часто у програмістів виникає спокуса написати якусь велику функцію, що повинна вирішувати певну задачу.…

2 тижні ago

Навіщо та як прокидатися раніше

Дискусії навколо цієї теми вас, певно, вже втомили. Але я в даній статті постараюсь показати…

2 тижні ago