Готов ли работать на классах

Готов ли работать на классах

Краткий ответ

Да, я готов работать с классами, как в современном JavaScript (ES6+), так и в React компонентах. Хотя функциональные компоненты сейчас более популярны, классы остаются валидным подходом и широко используются в legacy-кодах и некоторых проектах.

Когда используются классы в JavaScript

1. Классические объектно-ориентированные структуры

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this._createdAt = new Date();
  }

  getInfo() {
    return `${this.name} (${this.email})`;
  }

  // Приватные поля (с #)
  #password = null;

  setPassword(pwd) {
    this.#password = pwd;
  }

  static fromJSON(json) {
    return new User(json.name, json.email);
  }
}

const user = new User('John', 'john@example.com');
console.log(user.getInfo()); // John (john@example.com)

2. Наследование и полиморфизм

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

  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks`;
  }
}

class Cat extends Animal {
  speak() {
    return `${this.name} meows`;
  }
}

const animals = [new Dog('Rex'), new Cat('Whiskers')];
animals.forEach(a => console.log(a.speak()));
// Rex barks
// Whiskers meows

3. React компоненты на основе классов

Важно: React долгое время поддерживал классы, но сейчас рекомендует функциональные компоненты с хуками.

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    // Загрузка данных пользователя
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    const { user, loading, error } = this.state;

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    );
  }
}

Эквивалент в функциональном стиле:

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(user => {
        setUser(user);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

4. Getters и Setters

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  get area() {
    return this._width * this._height;
  }

  get perimeter() {
    return 2 * (this._width + this._height);
  }

  set width(value) {
    if (value <= 0) throw new Error('Width must be positive');
    this._width = value;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.area); // 50
rect.width = 7; // Вызывает setter
console.log(rect.area); // 70

Различия между классами и функциями

// Класс
class Button {
  handleClick() {
    console.log('Clicked');
  }
}

// Функция (конструктор) - старый способ
function Button() {}
Button.prototype.handleClick = function() {
  console.log('Clicked');
};

// Функциональный подход (современный)
const Button = () => ({
  handleClick: () => console.log('Clicked')
});

Современные возможности классов

class ModernClass {
  // Приватные поля (JS 2022)
  #privateField = 'secret';

  // Статические поля
  static publicVersion = '1.0.0';

  // Публичные поля
  instanceField = 'public';

  // Конструктор
  constructor() {
    this.initialized = true;
  }

  // Приватные методы
  #privateMethod() {
    return this.#privateField;
  }

  // Публичные методы
  getData() {
    return this.#privateMethod();
  }

  // Статические методы
  static create() {
    return new ModernClass();
  }
}

Практические сценарии, где классы полезны

1. Legacy React проекты - много старого кода на классах
2. TypeScript - классы хорошо интегрируются с типами
3. Архитектурные паттерны - Factory, Singleton, Observer и т.д.
4. Сложная бизнес-логика - когда нужна ООП структура

// Пример паттерна Observer на классах
class EventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data));
    }
  }
}

class UserManager extends EventEmitter {
  addUser(user) {
    // Логика добавления
    this.emit('user-added', user);
  }
}

Готовность к работе

Да, я полностью готов:

• Писать и читать классы на vanilla JavaScript
• Работать с React компонентами на основе классов (Component, PureComponent)
• Использовать наследование, статические методы, getters/setters
• Рефакторить классовый код в функциональный (и наоборот)
• Писать тесты для классов
• Интегрировать классы с современными инструментами (TypeScript, Babel)

Мое мнение

Классы - это валидный инструмент JavaScript, хотя в React экосистеме функциональные компоненты с хуками стали стандартом. Современный frontend-разработчик должен понимать оба подхода, так как:

• Наследование сложнее вывести в функциональном стиле
• Классы лучше для структурирования больших объектов
• Функции с замыканиями часто проще для конкретных задач
• TypeScript + классы = мощная комбинация

Выбор между классами и функциями зависит от контекста и требований проекта.