30. Геттеры и сеттеры

JavaScript: Мозги. Урок 3: Геттеры и сеттеры

Геттеры и сеттеры - это специальные методы в JavaScript, которые позволяют контролировать доступ к свойствам объекта. Они дают нам возможность выполнять дополнительную логику при чтении (геттер) и записи (сеттер) значений свойств.

Что такое геттеры и сеттеры?

Представьте, что обычное свойство объекта - это просто ячейка памяти, где хранится значение. Геттеры и сеттеры - это “стражи” этой ячейки.

• Геттер (getter) - метод, который вызывается, когда мы пытаемся получить значение свойства. Он позволяет нам вычислить или модифицировать значение перед тем, как вернуть его.
• Сеттер (setter) - метод, который вызывается, когда мы пытаемся присвоить значение свойству. Он позволяет нам выполнить валидацию, преобразование или другие действия перед тем, как сохранить значение.

Пример кода

const person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() { // Геттер для получения полного имени
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) { // Сеттер для установки полного имени
    const parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // Вывод: John Doe (вызывается геттер)

person.fullName = 'Jane Smith'; // Вызывается сеттер
console.log(person.firstName); // Вывод: Jane
console.log(person.lastName); // Вывод: Smith

В этом примере fullName - это не обычное свойство, а геттер и сеттер. Когда мы обращаемся к person.fullName, вызывается геттер, который формирует полное имя из firstName и lastName. Когда мы присваиваем значение person.fullName, вызывается сеттер, который разделяет строку на имя и фамилию и устанавливает их.

Еще один пример с валидацией

const circle = {
  radius: 1,
  get area() {
    return Math.PI * this.radius * this.radius;
  },
  set radius(value) {
    if (value <= 0) {
      console.error("Радиус должен быть положительным числом!");
      return;
    }
    this._radius = value; // Используем _radius, чтобы избежать бесконечной рекурсии
  },
  get radius() {
    return this._radius;
  }
};

circle.radius = 5;
console.log(circle.area); // Вывод: 78.53981633974483

circle.radius = -2; // Вывод ошибки в консоль
console.log(circle.radius); // Вывод: undefined (так как сеттер не позволил изменить radius)

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

Жизненный пример

Геттеры и сеттеры широко используются во фреймворках и библиотеках, таких как React, Vue и Angular, для реализации реактивных свойств. Когда значение реактивного свойства изменяется через сеттер, фреймворк автоматически обновляет DOM, чтобы отразить эти изменения.

Например, в Vue.js сеттеры используются для отслеживания изменений данных и автоматического обновления пользовательского интерфейса. Также геттеры могут быть использованы для кэширования результатов сложных вычислений, чтобы не пересчитывать их каждый раз при обращении к свойству.

Ключевые моменты

• Геттеры и сеттеры позволяют контролировать доступ к свойствам объекта.
• Геттеры вызываются при чтении значения свойства.
• Сеттеры вызываются при присваивании значения свойству.
• Они полезны для валидации данных, преобразования данных и реализации реактивных свойств.
• Используйте соглашение об именовании (например, _property) для внутренних переменных, чтобы избежать бесконечной рекурсии при использовании геттеров и сеттеров.

Интерактивный пример