JS Tower
JavaScript & TypeScriptМодуль 6: ООП и паттерны

Классы

Синтаксис классов в JavaScript

Цель урока

В этом уроке ты научишься:

  • Создавать классы
  • Использовать конструктор и методы
  • Работать со статическими членами

Базовый синтаксис

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Привет, я ${this.name}`);
  }
}

let user = new User("Иван", 25);
user.greet(); // "Привет, я Иван"

Конструктор

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.createdAt = new Date();
  }
}

let product = new Product("Телефон", 50000);
console.log(product.name);      // "Телефон"
console.log(product.createdAt); // текущая дата

Методы

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }
  
  add(n) {
    this.value += n;
    return this;
  }
  
  subtract(n) {
    this.value -= n;
    return this;
  }
  
  multiply(n) {
    this.value *= n;
    return this;
  }
  
  getResult() {
    return this.value;
  }
}

let calc = new Calculator(10);
let result = calc.add(5).multiply(2).subtract(10).getResult();
console.log(result); // 20

Геттеры и сеттеры

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  set fullName(value) {
    [this.firstName, this.lastName] = value.split(" ");
  }
}

let user = new User("Иван", "Петров");
console.log(user.fullName); // "Иван Петров"

user.fullName = "Пётр Сидоров";
console.log(user.firstName); // "Пётр"

Статические члены

class MathUtils {
  static PI = 3.14159;
  
  static square(n) {
    return n * n;
  }
  
  static cube(n) {
    return n * n * n;
  }
}

console.log(MathUtils.PI);        // 3.14159
console.log(MathUtils.square(5)); // 25
console.log(MathUtils.cube(3));   // 27

// Не работает на экземплярах
// let m = new MathUtils();
// m.square(5); // Ошибка!

Приватные поля

class BankAccount {
  #balance = 0;
  
  constructor(initialBalance) {
    this.#balance = initialBalance;
  }
  
  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }
  
  withdraw(amount) {
    if (amount > 0 && amount <= this.#balance) {
      this.#balance -= amount;
      return amount;
    }
    return 0;
  }
  
  getBalance() {
    return this.#balance;
  }
}

let account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Ошибка!

Практика

Задание 1: Создание класса

Задача: Создай класс Rectangle с методами.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
20
18

Задание 2: Геттер

Задача: Добавь геттер для вычисляемого свойства.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
78.53981633974483

Задание 3: Статический метод

Задача: Создай класс со статическим методом.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Hello

Проверь себя

  1. Что делает конструктор?
  2. Чем статические методы отличаются от обычных?
  3. Как создать приватное поле?