JS об'єкт class
Загальний опис
class — це синтаксична конструкція JavaScript, яка дозволяє створювати шаблони для створення об'єктів. Хоча класи в JavaScript є "цукровою" надбудовою над прототипним наслідуванням, вони забезпечують зрозумілий і організований спосіб роботи з об'єктно-орієнтованим програмуванням.
Клас визначається за допомогою ключового слова class, після якого йде ім'я класу. Всі методи класу автоматично стають доступними для об'єктів, створених із цього класу. Основний метод класу — це constructor, який викликається під час створення нового екземпляра (об'єкта) і задає початкові значення властивостей:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
start() {
console.log(`${this.brand} ${this.model} запускається!`);
}
}
const myCar = new Car('Toyota', 'Corolla');
myCar.start(); // Toyota Corolla запускається!
Класи підтримують статичні методи (static), які доступні лише на самому класі, а не на його екземплярах:
class MathHelper {
static add(a, b) {
return a + b;
}
}
console.log(MathHelper.add(2, 3)); // 5
Також класи можуть наслідувати один одного за допомогою ключового слова extends, що дозволяє створювати ієрархії об'єктів:
class ElectricCar extends Car {
constructor(brand, model, battery) {
super(brand, model);
this.battery = battery;
}
charge() {
console.log(`Заряджаємо батарею ${this.battery} кВтг`);
}
}
const myElectricCar = new ElectricCar('Tesla', 'Model 3', 75);
myElectricCar.charge(); // Заряджаємо батарею 75 кВтг
Класи є основою для побудови масштабованих і організованих додатків.
| Порада: | Якщо ваш клас має властивості, що часто не змінюються, використовуйте |
| Порада: | Уникайте створення методів всередині конструктора — це призведе до зайвого споживання пам'яті, оскільки методи не будуть спільними між екземплярами. Використовуйте прототипи (методи класу) для збереження пам'яті. |
| Порада: | Не бійтеся розділяти класи на менші класи з єдиною відповідальністю. Клас з багатьма методами, які не пов'язані між собою, складно підтримувати. |
Синтаксис
class ClassName {
constructor(parameter1, parameter2) {
this.property1 = parameter1;
this.property2 = parameter2;
}
method1() {
// Метод класу
}
static staticMethod() {
// Статичний метод
}
}Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
49 |
45 |
10.1 |
36 |
13 |
| Переглядач | ||||
|---|---|---|---|---|
49 |
49 |
45 |
10.3 |
| Переглядач | ||
|---|---|---|
6.0.0 |
1.0 |
Приклади
Цей приклад показує, як за допомогою класу створювати динамічний список нотаток. Клас NotesApp містить методи для додавання, видалення та відображення нотаток. Користувач взаємодіє зі сторінкою через форму введення і кнопки "Видалити", що дає можливість повністю управляти списком нотаток.
Цей приклад демонструє використання класів для реалізації системи авторизації та приватних полів для безпечного зберігання паролів.
class User {
constructor(username, password) {
this.username = username;
this.#password = password; // Приватне поле
}
#password; // Приватна змінна
validatePassword(password) {
return this.#password === password;
}
}
class Admin extends User {
constructor(username, password) {
super(username, password);
}
deleteUser(user) {
console.log(`Користувача ${user.username} видалено!`);
}
}
const admin = new Admin('Admin', 'securepass');
const user = new User('User1', 'mypassword');
console.log(user.validatePassword('wrongpass')); // false
admin.deleteUser(user); // Користувача User1 видалено!Клас реалізує кошик покупок з підтримкою знижок, демонструючи наслідування та перевизначення методів.
class Cart {
constructor() {
this.items = [];
}
addItem(item, price) {
this.items.push({ item, price });
}
calculateTotal() {
return this.items.reduce((total, currentItem) => total + currentItem.price, 0);
}
}
class DiscountCart extends Cart {
constructor(discountRate) {
super();
this.discountRate = discountRate;
}
calculateTotal() {
const total = super.calculateTotal();
return total - total * this.discountRate;
}
}
const myCart = new DiscountCart(0.1);
myCart.addItem('Товар 1', 100);
myCart.addItem('Товар 2', 200);
console.log(myCart.calculateTotal()); // 270