В js геттеры и сеттеры это отдельные функции get, set? Как они работают?

Ответы
Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
26 июля 2022

В JS есть особый тип свойств — это свойства-аксессоры. Их особенность в том, что при обращении к этим свойствам вызываются функции, которые выполняют необходимую работу. Все взаимодействия со свойствами сводятся к двум операциям: получение значения из свойства и присваивание нового значения свойству. То есть, чтобы работать со свойством объекта, достаточно описать две операции: операцию получения значения из свойства и операцию сохранения значения в свойство. Это и есть геттеры и сеттеры. Геттер — занимается извлечением значения из свойства, а сеттер — сохранением значения. Для этого в JS есть специальный механизм, в котором ставится get перед геттером и set перед сеттером. Рассмотрим пример, в котором у нас есть пользователь с именем и фамилией:

const user = {
  firstName: 'Ivan',
  lastName: 'Ivanov',
};

И мы хотим определить третье свойство, которое бы содержало полное имя. Оно зависит от имени и фамилии, поэтому, чтобы не дублировать данные, лучше всего подойдёт геттер:

const user = {
  firstName: 'Ivan',
  lastName: 'Ivanov',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.fullName); // => Ivan Ivanov

При обращении к свойству fullName вызывается геттер, который формирует результат и возвращает его. Также мы можем определить сеттер для этого свойства, функция будет обновлять данные о пользователе:

const user = {
  firstName: 'Ivan',
  lastName: 'Ivanov',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(fullName) {
    const [first, second] = fullName.split(' ');
    this.firstName = first;
    this.lastName = second;
  },
};

user.fullName = 'Petr Petrov';
console.log(user); // => {firstName: 'Petr', lastName: 'Petrov'}

При обновлении свойства, вызывается сеттер, внутри которого происходит вся необходимая работа и сохранение данных, если это необходимо.

Добавьте ваш ответ

Рекомендуемые курсы

классы
инкапсуляция
контекст
прототипы
15 часов
Посмотреть
модули
импорты
отладка программы
ошибки
50 часов
Посмотреть
полифиллы
AJAX
события
селекторы
20 часов
Посмотреть