Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Статические свойства и методы JS: Введение в ООП

В одном из предыдущих уроков мы реализовывали конструктор денег (Money). Вспомним его интерфейс:

const money1 = new Money(100);
money1.getValue(); // 100
money1.format(); // "$100"
// Не меняет сам money1
money1.exchangeTo('eur').getValue(); // 70

const money2 = new Money(200, 'eur');
const money3 = money2.add(money1); // 270

Количество денег и их валюта являются частью конкретного объекта, но что насчет ставок? Ниже пример возможной реализации конструктора:

class Money {
  constructor() {
    this.rates = {
      usd: {
        eur: 0.7,
      },
      eur: {
        usd: 1.2,
      },
    };
  }
}

При таком определении класса каждый вновь созданный объект получит свою собственную копию информации о ставках конвертирования. Технически этот код работает, но логически он неверен. Ставки не имеют отношения к конкретному объекту Money, они определяют поведение всех денег. Представьте, что нам понадобилось бы расширить количество валют или поменять ставки во время работы программы. Такое возможно, если ставки вычисляются динамически, как это и происходит в реальной жизни. Это значит, что всё должно поменяться без остановки программы. Из-за привязки этих параметров к каждому объекту индивидуально, пришлось бы пересоздавать все объекты или перезапускать программу.

Для решения этой задачи используют функции-конструкторы. Любая функция в JavaScript является объектом, а любое свойство, добавленное в функцию-конструктор, доступно во всех его объектах:

// Не важно как определен сам Money. Это может быть обычная функция-конструктор или класс.
// Так или иначе любой класс внутри JS — это функция конструктор + прототип, наполненный функциями

Money.rates = {
  usd: {
    eur: 0.7,
  },
  eur: {
    usd: 1.2,
  },
};

Обращение к свойству конструктора отличается от вызова обычных свойств самого объекта. Есть два основных способа. Первый – напрямую через функцию-конструктор Money.rates. Так проще всего, но тогда приходится дублировать имя функции-конструктора. Второй – через свойство constructor. Это специальное свойство, которое дает прямой доступ к конструктору из объектов. Именно этот способ является предпочтительным, когда мы находимся внутри объекта:

class Money {
  constructor(value, currency = 'usd') {
    this.value = value;
    this.currency = currency;
  }

  exchangeTo(newCurrency) {
    if (this.currency === newCurrency) {
      return new Money(this.value, this.currency);
    }
    // this.constructor.rates находится в функции-конструкторе
    const newValue = this.value * this.constructor.rates[this.currency][newCurrency];
    return new Money(newValue, newCurrency);
  };

  // Другие методы
}

Таким подходом мы разделили ответственности. Сам объект Money отвечает только за свои данные. За общие вещи отвечает конструктор. Это позволяет изменять параметры Money сразу для всех объектов:

Money.rates.usd.eur = 0.71;

Можно пойти еще дальше и обновлять данные не напрямую, а через методы:

Money.setRate = function setRate(from, to, value) {
  // Здесь уже обращаемся напрямую, потому что мы находимся в контексте объекта Money (она же функция-конструктор)
  this.rates[from][to] = value;
}

Money.setRate('usd', 'gbp', 0.6);

Но будьте осторожны. Всё, что лежит в функции-конструкторе, фактически стало глобальным состоянием. Любое изменение отражается на всех объектах сразу. Иногда это может быть хорошо, как в нашем случае, но в других случаях это может приводить к рассинхронизации данных. Особенно в тех ситуациях, когда процессы разделены во времени (асинхронный код).

Статика

Подобная функциональность реализуется с помощью статических свойств и методов. Вот как это выглядит:

class Money {
  // Определение статического свойства
  static rates = {
    usd: {
      eur: 0.7,
    },
    eur: {
      usd: 1.2,
    },
  };

  // Определение статического метода
  static setRate(from, to, value) {
    this.rates[from][to] = value;
  }
}

// Использование ровно такое же как и в примерах выше
Money.rates.usd.eur; // 0.7
Money.setRate('usd', 'eur', 0.8);
Money.rates.usd.eur; // 0.8

// Изнутри объектов обращаться можно через this.constructor

Статика, как и классы – всего лишь сахар над функциями. Но они становятся популярны, так как позволяют сделать код чище.


Дополнительные материалы

  1. Статические свойства / MDN
  2. Статические методы / MDN
  3. Как работает `new this` внутри статических методов

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»