Классы: объявление, конструктор, методы, extends, super

Введение в классы: новый синтаксис для объектов 🏗️

Классы в JavaScript — это "синтаксический сахар" над прототипами, делающий работу с ООП интуитивно понятнее. Давай разберёмся, как они работают под капотом!

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

🔍 Важно: Классы — это не магия! Под капотом всё те же прототипы. Они просто делают код чище и удобнее.

Конструктор — сердце класса ⚙️

Конструктор — специальный метод, вызываемый при создании экземпляра. Здесь инициализируются свойства:

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.isAdmin = false; // Значение по умолчанию
  }
}

const john = new User('John', 30);
console.log(john.age); // 30

📌 Правила конструктора:

Вызывается автоматически при new
Может принимать параметры
Может содержать любую логику инициализации

Методы класса: функциональность в действии 🛠️

Методы добавляют поведение экземплярам. Они автоматически попадают в прототип:

class Calculator {
  constructor() {
    this.result = 0;
  }

  add(num) {
    this.result += num;
    return this; // Возвращаем this для чейнинга
  }

  showResult() {
    console.log(`Результат: ${this.result}`);
  }
}

const calc = new Calculator();
calc.add(5).add(3).showResult(); // Результат: 8

💡 Профессиональный приём: Возвращая this из методов, можно реализовать цепочки вызовов (method chaining).

Наследование с extends: мощь ООП 🦸

Ключевое слово extends позволяет создавать иерархии классов:

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  move() {
    console.log(`${this.type} двигается`);
  }
}

class Car extends Vehicle {
  constructor(model) {
    super('Автомобиль'); // Вызов родительского конструктора
    this.model = model;
  }

  honk() {
    console.log('Би-бип!');
  }
}

const tesla = new Car('Model S');
tesla.move(); // "Автомобиль двигается"

Super: доступ к родительскому классу 🔑

super выполняет две важные роли:

Вызов конструктора родителя (в конструкторе)
Доступ к методам родителя (в методах)

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // Обязательно до this!
  }

  speak() {
    super.speak(); // Вызов родительского метода
    console.log(`${this.name} лает!`);
  }
}

const rex = new Dog('Rex');
rex.speak();
// "Rex издает звук"
// "Rex лает!"

⚠️ Начинающие часто забывают:

super() в конструкторе нужно вызывать до this
Без super() в дочернем конструкторе — ошибка!

Геттеры и сеттеры: контроль доступа 🎛️

Классы поддерживают специальные методы для управления свойствами:

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }

  get fahrenheit() {
    return this.celsius * 1.8 + 32;
  }

  set fahrenheit(value) {
    this.celsius = (value - 32) / 1.8;
  }
}

const temp = new Temperature(25);
console.log(temp.fahrenheit); // 77
temp.fahrenheit = 100;
console.log(temp.celsius); // 37.777...

Статические методы и свойства 🏛️

Статические члены принадлежат классу, а не экземплярам:

class MathHelper {
  static PI = 3.14159;

  static circleArea(radius) {
    return this.PI * radius ** 2;
  }
}

console.log(MathHelper.circleArea(5)); // 78.53975

🛠️ Где использовать? Для утилитных функций, фабричных методов, констант.

Итог: когда и зачем использовать классы 🏆

Плюсы классов:

✅ Чистый и понятный синтаксис
✅ Поддержка наследования
✅ Интуитивная структура

Когда применять:

🔹 Много связанных объектов
🔹 Нужно наследование
🔹 Важна структура кода

// Пример итогового кода
class Shape {
  constructor(color) {
    this.color = color;
  }

  describe() {
    console.log(`Фигура цвета ${this.color}`);
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const redCircle = new Circle('red', 10);
redCircle.describe();
console.log(redCircle.area());