Статические свойства и методы — 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, так же, как в примерах со свойствами конструктора:

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

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

  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)
  };

  getValue() {
    return this.value
  }
}

const money1 = new Money(100)
console.log(money1.getValue()) // => 100
// Не меняет сам money1
console.log(money1.exchangeTo('eur').getValue()) // 70
console.log(money1.getValue()) // => 100

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

Итог

Статические свойства классов в JavaScript используются для хранения данных, которые не связаны с конкретным экземпляром класса, а относятся ко всему классу в целом. Они объявляются внутри класса с использованием ключевого слова static или через обращение к конструктору класса.

Представим, что у нас есть класс "Квадрат". Мы хотим, чтобы каждый экземпляр этого класса имел длину стороны по умолчанию. В таком случае можно определить статическое свойство с этим значением, чтобы оно использовалось при создании объекта.

Это же применимо и для общих методов класса. Например, в классе "Квадрат" можно определить статический метод вычисления площади квадрата, потому что формула вычисления площади всех квадратов одинаковая.

Советуем использовать статические свойства классов, когда данные или методы относятся ко всему классу, а не конкретному объекту. Это может улучшить читабельность и производительность кода — так данные не будут дублироваться в каждом объекте класса.

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

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

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