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 кВтг

Класи є основою для побудови масштабованих і організованих додатків.

правити

Порада

Якщо ваш клас має властивості, що часто не змінюються, використовуйте Object.freeze для об'єкта-параметра в constructor, щоб уникнути випадкових змін.

автор: Bond правити

Порада

Уникайте створення методів всередині конструктора — це призведе до зайвого споживання пам'яті, оскільки методи не будуть спільними між екземплярами. Використовуйте прототипи (методи класу) для збереження пам'яті.

автор: Bond правити

Порада

Не бійтеся розділяти класи на менші класи з єдиною відповідальністю. Клас з багатьма методами, які не пов'язані між собою, складно підтримувати.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Приклади

+ запропонувати свій приклад у пісочниці

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