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

В одном из предыдущих уроков мы реализовывали конструктор денег (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, они определяют поведение всех денег. Представьте, что нам понадобилось бы расширить количество валют или поменять ставки во время работы программы (Это значит что все должно поменяться без остановки программы). Из-за привязки этих параметров к каждому объетку индивидуально, пришлось бы пересоздавать все объекты или перезапускать программу. Такое возможно если ставки вычисляются динамически и меняются сами.

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

// Не важно как определен сам 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);

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

Статика

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

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

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