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

Теорія кольору – поради для натхнення веб-дизайнерам

Ви коли-небудь замислювалися про те, як веб-дизайнери підбирають ідеальне поєднання кольорів? Цікавилися тим, які кольори… Read More

30/04/2021

Як стати фрілансером – дієві поради

Фріланс – це можливість спокійно і розмірено працювати вдома, не звертаючи увагу на навколишній простір,… Read More

27/04/2021

Найкрасивіші каньйони з усього світу (частина 1/2)

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

27/04/2021

Вільям Шекспір

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

18/04/2021

Що подарувати друзям на річницю весілля

Люди, між якими є любов і взаєморозуміння, скріплюють стосунки й народжують новий союз, а дату… Read More

13/04/2021

Авторитетність домену та його вплив на SEO просування сайту

Для якісного SEO (пошукової оптимізації, розкрутки сайту) одним з важливих показників є Авторитет домену (Domain… Read More

27/03/2021