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

Tags: JavaScript

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020

Види та типи компресійних панчіх

Вироби називають компресійними, коли їх застосовують для лікування, а також профілактики порушень кровотоку в нижніх… Read More

22/08/2020

Як правильно замінити оливу у двотактному гідроциклі?

Гідроцикли – це класний плавзасіб, який може подарувати вам незліченні години приємного проведення часу на… Read More

19/08/2020