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

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

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

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

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

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

В одном из предыдущих уроков мы реализовывали конструктор денег (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

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

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

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

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

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

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».