JavaScript — це багатопарадигмальна мова, яка дозволяє писати програми, що дотримуються функціонального, об’єктно-орієнтованого та імперативного стилів програмування.
Для підтримки об’єктно-орієнтованих шаблонів JavaScript має класи. Оскільки розуміти їх дуже важливо, ця стаття є посібником щодо того, що таке класи JavaScript і як ними користуватися.
Що таке класи в JavaScript?
В об’єктно-орієнтованому програмуванні ми моделюємо системи як групи об’єктів, які взаємодіють один з одним. Для функціонування об’єкти зберігають дані у властивостях і виконують дії, визначені як їхні методи. Клас визначає, які властивості та методи мають об’єкти одного типу. Таким чином, класи є кресленнями для об’єктів.
Термінології, що використовуються на заняттях
Щоб переконатися, що ми знаходимося на одній сторінці, ось опис класів із ключовими термінами, які ми будемо використовувати в цій статті. Якщо ви вже знайомі з об’єктно-орієнтованим програмуванням, ви можете перейти до наступного розділу.
❇️ Клас – це схема об’єкта. Він надає шаблон, з якого можна створювати об’єкти цього типу. Створення об’єкта з шаблону, наданого класом, називається інстанціюванням.
❇️ Член класу – це все, що належить до класу. Є два типи членів класу – методи та властивості.
❇️ Властивість — це член класу, основною метою якого є зберігання значень. Це можуть бути прості значення, такі як числа та рядки. Вони також можуть бути складними об’єктами та масивами.
❇️ Деякі властивості доступні лише всередині класу, і їх влучно називають приватними властивостями. Деякі з них доступні як у класі, так і поза ним. Такі властивості називаються загальнодоступними.
❇️ Метод — це функція, визначена всередині класу. Таким чином, він належить до класу і має доступ до публічних і приватних властивостей. Подібно до властивостей, ми також маємо публічні та приватні методи.
❇️ Деякі методи існують, щоб надати інтерфейс для коду поза класом для взаємодії з властивостями всередині класу. Є дві групи методів, які це роблять: геттери та сетери. Геттери отримують значення властивостей класу, а сеттери встановлюють значення властивостей класу.
❇️ Деякі учасники статичні. Це означає, що вони доступні лише в класі і не можуть бути доступні в екземплярах класу.
Навпаки, деякі члени класу не є статичними, тобто до них можна отримати доступ лише в екземплярах класу. Ви повинні створити екземпляр класу, перш ніж матимете доступ до нестатичного члена.
Коли ви створюєте екземпляр класу, викликається спеціальний метод для налаштування властивостей екземпляра. Цей метод називається функцією-конструктором.
Пояснення створення екземпляра класу
Ми використовуємо ключове слово new і назву класу, щоб створити екземпляр класу в JavaScript. Наприклад, створимо екземпляр класу Array.
const myArr = new Array()
Створення класів у JavaScript
У цьому розділі буде обговорено створення класу, який реалізує всі концепції, розглянуті в Термінологічний відділ. Ми зробимо це в серії прикладів, де кожен приклад спирається на попередні.
Оголошення порожнього класу
Щоб оголосити клас у JavaScript, ми використовуємо ключове слово class і даємо класу назву. Далі ми визначаємо тіло класу. Тіло взято у фігурні дужки та містить усі члени класу.
Ось приклад оголошення класу з порожнім тілом:
class Dog {
}
Тепер ви можете створити екземпляр класу та роздрукувати його.
const pet = new Dog; console.log(pet);
Створення публічних властивостей
Загальнодоступні властивості визначаються за допомогою ідентифікатора та необов’язкового значення.
class Dog {
name = "Roy";
age;
}
Тут ми визначили ім’я зі значенням рядка та вік без значення.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Визначення публічних методів
Ми можемо додавати методи до нашого класу всередині його тіла. Ми визначаємо метод так само, як і функцію. Однак ми опускаємо ключове слово function.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}
У прикладі вище ми визначили метод walk. Кожен екземпляр класу Animal матиме цей метод.
const pet = new Dog(); pet.walk();
Доступ до властивостей із методів
У JavaScript ми зазвичай отримуємо доступ до властивостей об’єкта за допомогою оператора крапки. Наприклад, якби ми мали об’єкт з іменем person і хотіли б отримати доступ до властивості name, ми б зробили це наступним чином.
person.name
Однак, якщо ми хочемо отримати доступ до властивості з об’єкта, ми використовуємо ключове слово this замість імені об’єкта. Ось приклад:
this.name
Ключове слово this посилається на об’єкт. Отже, якби ми хотіли отримати доступ до властивостей класу з методів класу, ми б використали цей синтаксис.
Створення приватної власності
Припустімо, ми хочемо, щоб властивості імені та віку, які ми визначили раніше, були приватними. Ми б перевизначили клас таким чином:
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}
Як бачите, приватні властивості вказуються за допомогою знаків фунта. Якщо ви спробуєте отримати до них доступ, ви зіткнетеся з помилками.
const dog = new Dog(); dog.#name
Створення методів Getter і Setter
Тепер властивості імені та віку класу є закритими. Тому до них можна отримати доступ лише методами всередині класу.
Якщо ми хочемо дозволити коду поза класом отримати доступ до цих властивостей, ми визначаємо геттери та сетери. Давайте зробимо це для властивості name.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}
За допомогою класу, визначеного вище, ви можете встановити назву та відобразити її за допомогою коду нижче:
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Створення приватних методів
Як і приватні властивості, приватні методи мають префікс знаком фунта. Тому оголошення приватного методу виглядатиме так:
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Якщо ви спробуєте отримати доступ до цих методів поза класом, це не спрацює.
const pet = new Dog(); pet.#increaseAge();
Створення методу конструктора
Ви також можете визначити метод конструктора. Цей метод буде автоматично викликаний кожного разу, коли ви створюєте новий клас. Для ініціалізації властивостей можна використовувати метод конструктора. У цьому прикладі ми ініціалізуємо вік і ім’я будь-якими аргументами, наданими користувачем під час створення екземпляра.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Коли ми створюємо екземпляр нашого класу, ми можемо вказати ім’я та вік.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Створення статичних властивостей і методів
Як згадувалося, до статичних членів можна отримати доступ без попереднього створення екземпляра класу. У прикладі нижче ми створимо статичну властивість і метод.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Тепер ви можете отримати доступ до статичної властивості та методу без створення екземпляра.
console.log(Dog.genus); Dog.bark();
Спадщина
Класи можуть успадковувати властивості від інших класів. Клас, який успадковує членів від іншого класу, називається суперкласом, тоді як клас, члени якого він успадковує, є базовим класом або підкласом.
Щоб створити суперклас у JavaScript, ми використовуємо ключове слово extends. Ось приклад, коли ми успадковуємо клас Dog.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}
Як бачите, клас майже не змінився. Однак усередині конструктора ми викликали функцію super. Ключове слово super посилається на конструктор базового класу. Тому ми викликали конструктор базового класу всередині нашого суперкласу, передавши назву та вік.
const myPet = new Rottweiler(); console.log(myPet);
Висновок
У цій статті ми розглянули заняття. Ми розглянули, що це таке, членів, які вони можуть мати, і різні класифікації учасників. Потім ми все це проілюстрували прикладами.
Далі ви можете прочитати запитання для співбесіди з об’єктно-орієнтованого програмування.