Зарегистрируйтесь для доступа к 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('gbp', 'usd', 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

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

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

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

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

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

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

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

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

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

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»