Классы и this

MobX позволяет создавать наблюдаемые состояния как с помощью объектов, так и с помощью классов. В книге мы будем использовать примеры на классах, т.к. с классами вы можете использовать модификаторы доступа, а ещё с ними лучше работает вывод типов TS (об этом отдельная глава для продвинутых).

Если у вас есть опыт работы с классами, вы понимаете, что такое поля и методы класса, и как не терять this, то можете смело пропустить данную главу.

Итак, классы определяются с помощью ключевого слова class:

class User {}

Поля класса

Класс описывает состояние (свойства, характеристики) объекта:

class User {
  name = 'Anon'
  age?: number
}

Мы можем присвоить полям класса начальные значения (как для isAuthorized и name). Если мы не определили (undefined) значения для поля, то необходимо указать его тип (как number для age).

Методы класса

Помимо хранения данных, мы можем определить методы, которые описывают поведение класса.

class User {
  name = 'Anon'

  greeting() {
    console.log('Hello', this.name)
  }
}

Экземпляр класса

С помощью ключевого слова new мы можем создать объект, который представляет собой экземпляр (инстанс) класса.

class User {
  name = 'Anon'

  greeting() {
    console.log('Hello', this.name)
  }
}

const user = new User()

This

В предыдущем примере в методы greeting мы обратились к полю name с помощью ключевого слова this. В JavaScript, в отличие от многих других языков, значение this зависит от контекста.

В ECMAScript 5 для привязки значения this был создан метод bind. В MobX для привязки экшенов к экземпляру можно использовать аннотацию action.bound или передать параметр autoBind.

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

class User {
  name = 'Anon'

  greeting = () => {
    console.log('Hello', this.name)
  }
}

Более подробно работа с this рассмотрена в главе Все сценарии потери реактивности.