JavaScript має можливості для обʼєктно-орієнтованого програмування (ООП).
В ООП ми хочемо створювати обʼєкти (екземпляри) з «шаблонів» (класів), щоб вони містили певні дані та функціональність.
Властивості з даними в контексті ООП називають полями, а властивості-функції - методами.
До того, як 2015 року класи додали до специфікації мови, у JavaScript їх не було взагалі, але він дозволяв обʼєктно-орієнтоване програмування через успадкування на основі прототипів.
І хоча нині вже доступне ключове слово class, JavaScript усе ще залишається прототипною мовою.
Щоб зрозуміти, що означає бути прототипною мовою і як JavaScript насправді працює, повернімося в часи, коли класів ще не було.
Синтаксис прототипів
Функція-конструктор
У JavaScript роль шаблону (класу) виконує звичайна функція.
Коли функцію мають використовувати як такий шаблон, її називають функцією-конструктором, і за домовленістю її назва має починатися з великої літери.
Екземпляри (обʼєкти) створюються з шаблону за допомогою ключового слова new під час виклику функції-конструктора.
function Car() {
// ...
}
const myCar = new Car();
const yourCar = new Car();
Важливо зауважити, що в JavaScript екземпляри й функція-конструктор зберігають звʼязок один з одним навіть після створення екземплярів.
Кожен обʼєкт-екземпляр містить приховану внутрішню властивість, яку в специфікації мови позначено як [[prototype]].
Вона зберігає посилання на значення ключа prototype функції-конструктора.
Так, усе правильно: функція JavaScript може мати пари ключ-значення, адже за лаштунками вона також є обʼєктом.
Підсумуймо:
- Конструктори в JavaScript є звичайними функціями.
- Створення нового екземпляра дає обʼєкт зі звʼязком зі своїм конструктором, який називають його прототипом.
- Функції є обʼєктами (обʼєктами, які можна викликати), а отже, можуть мати властивості.
- Властивість
prototype функції-конструктора стане прототипом екземпляра.
Поля екземпляра
Часто ми хочемо, щоб усі похідні обʼєкти (екземпляри) містили певні поля, і під час створення обʼєкта передаємо для них початкові значення.
Цього можна досягти за допомогою ключового слова this.
Усередині функції-конструктора this позначає новий обʼєкт, який буде створено через new.
this автоматично повертається з функції-конструктора, коли її викликають з new.
Це означає, що ми можемо додавати поля до нового екземпляра, додаючи їх до this у функції-конструкторі.
function Car(color, weight) {
this.color = color;
this.weight = weight;
this.engineRunning = false;
}
const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false
Методи екземпляра
Методи додаються через властивість prototype функції-конструктора.
Усередині методу ми можемо отримати доступ до полів екземпляра через this.
Це працює завдяки такому загальному правилу.
Коли функцію викликають як метод обʼєкта, її this вказує на обʼєкт, для якого викликано метод.
function Car() {
this.engineRunning = false;
// ...
}
Car.prototype.startEngine = function () {
this.engineRunning = true;
};
Car.prototype.addGas = function (litre) {
// ...
};
const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true
Ланцюжок прототипів
myCar із прикладу вище є звичайним обʼєктом JavaScript, і якби ми його оглянули (наприклад, у консолі браузера), то не знайшли б властивості startEngine зі значенням-функцією безпосередньо в обʼєкті myCar.
То як тоді взагалі працює наведений код?
Секрет тут називається ланцюжком прототипів.
Коли ми намагаємося отримати доступ до будь-якої властивості (поля чи методу) обʼєкта, JavaScript спершу перевіряє, чи відповідний ключ можна знайти безпосередньо в самому обʼєкті.
Якщо ні, він продовжує шукати ключ в обʼєкті, на який посилається властивість [[prototype]] початкового обʼєкта.
Як зазначалося раніше, у нашому прикладі [[prototype]] вказує на властивість prototype функції-конструктора.
Саме там JavaScript знайде функцію startEngine, бо ми додали її туди.
function Car() {
// ...
}
Car.prototype.startEngine = function () {
// ...
};
І ланцюжок на цьому не закінчується.
Властивість [[prototype]] обʼєкта Car.prototype (myCar.[[prototype]].[[prototype]]) посилається на Object.prototype (властивість prototype функції-конструктора Object).
Вона містить загальні методи, доступні для всіх обʼєктів JavaScript, наприклад toString().
Отже, ми можемо викликати myCar.toString(), і цей метод існуватиме, бо JavaScript шукає його по всьому ланцюжку прототипів.
Зауважмо, що ланцюжком прототипів проходять лише під час читання значення.
Безпосереднє встановлення чи видалення властивості обʼєкта-екземпляра стосується лише цього конкретного екземпляра.
Це може бути не тим, на що ми очікуємо, якщо звикли до мови з успадкуванням на основі класів.
Синтаксис класів
Сьогодні JavaScript підтримує визначення класів за допомогою ключового слова class.
Це додали до специфікації мови 2015 року.
З одного боку, це дає синтаксичний цукор, який робить класи зрозумілішими для читання й написання.
Новий синтаксис більше схожий на те, як класи пишуть у таких мовах, як C++ чи Java.
Розробникам, які переходять із цих мов, легше адаптуватися.
З іншого боку, синтаксис класів відкриває шлях для нових можливостей мови, недоступних у синтаксисі прототипів.
Оголошення класів
У новому синтаксисі класи визначають ключовим словом class, після якого йде назва класу та тіло класу у фігурних дужках.
Тіло містить визначення функції-конструктора, тобто спеціального методу з назвою constructor.
Ця функція працює так само, як функція-конструктор у синтаксисі прототипів.
Тіло класу також містить усі визначення методів.
Синтаксис методів подібний до скороченого запису, який ми бачили для додавання функцій як значень усередину обʼєкта, див. Концепція «Обʼєкти».
class Car {
constructor(color, weight) {
this.color = color;
this.weight = weight;
this.engineRunning = false;
}
startEngine() {
this.engineRunning = true;
}
addGas(litre) {
// ...
}
}
const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true
Памʼятаймо, що за лаштунками JavaScript усе ще залишається прототипною мовою.
Усі механізми, про які ми дізналися в розділі «Синтаксис прототипів» вище, усе ще діють.
Приватні поля, гетери й сетери
Типово всі поля екземпляра в JavaScript є публічними.
До них можна безпосередньо звертатися й присвоювати їм значення.
Однак існує усталена домовленість, що поля й методи, які починаються з підкреслення, слід вважати приватними.
До них ніколи не слід звертатися безпосередньо ззовні класу.
Приватні поля іноді супроводжують гетери і сетери.
За допомогою ключових слів get і set ми можемо визначати функції, які виконуються, коли звертаються до властивості з тією ж назвою, що й у функції, або присвоюють їй значення.
class Car {
constructor() {
this._mileage = 0;
}
get mileage() {
return this._mileage;
}
set mileage(value) {
throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
// Just an example, usually you would not provide a setter in this case.
}
}
const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.
Навчальна вправа
