Геттеры и сеттеры в JS

В этой статье вы узнаете о том, что такое getters и setters и зачем они нужны в JavaScript. 

В прошлых статьях этого раздела мы говорили про объекта и их свойства. 

У объектов в JavaScript два типа свойств.

1. Свойства-данные — это обычные свойства, с которыми мы работали в предыдущих статьях. 
2. Свойства-аксессоры — это функции дял присвоения и получения значений объекта. Вне объеккта они выглядят как обычные свойства.

Свойства-аксессоры

Свойства-аксессоры (accessor properties) — это 2 метода, которые получают или устанавливают значение объекта. Для этого используются два ключевых слова:

• get — для геттеров (getters). Геттеры — для чтения, они позволяют получить значение объекта. 
• set — для сеттеров (setters). Сеттеры — для записи, они позволяют присваиваивать значения объекта. 

Геттеры

Геттеры позволяют получить значение объекта. Рассмотрим на примере:

const student = {

    // свойство-данные
    firstName: 'Маша',
    
    // свойство-аксессор (геттер)
    get getName() {
        return this.firstName;
    }
};

// доступ к свойству-данным
console.log(student.firstName); // Вывод: Маша

// доступ к свойству-аксессору
console.log(student.getName); // Вывод: Маша

// если попытаемся вызвать геттер как метод — получим ошибку
console.log(student.getName()); // здесь будет ошибка

В этом примере создан геттер getName(). Он позволяет получить доступ к свойству-данным firstName.

get getName() {
    return this.firstName;
}

Примечание. Обратите внимание, что при объявлении геттера используется ключевоео слово get. Оно обязательно.

Сеттеры

Сеттеры позволяют изменять значение объекта. Рассмотрим на примере:

const student = {
    firstName: 'Маша',
    
    // свойство-аксессор (сеттер)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Вывод: Маша

// изменяем свойство объекта с помощью сеттера
student.changeName = 'Настя';

console.log(student.firstName); // Вывод: Настя

В этом примере создан сеттер changeName(). Он позволяет получить доступ к свойству-данным firstName.

 

set changeName(newName) {
    this.firstName = newName;
}

Примечание. Обратите внимание, что при объявлении сеттера используется ключевоео слово set. Оно обязательно.

Сначала свойство firstName у объекта student — 'Маша'. С помощью сеттера мы меняем его на 'Настя'.

Примечание. У сеттера обязательно должен быть только один формальный аргумент. Один сеттер изменяет одно свойство. 

Object.defineProperty()

Добавлять геттеры и сеттеры в объект можно еще и с помощью метода Object.defineProperty().

Синтаксис

Object.defineProperty(obj, prop, descriptor)

• Первый аргумент obj — имя объекта.
• Второй аргумент prop — имя свойства.
• Третий аргумент descriptor — объект, описывающий свойство.

Пример

const student = {
    firstName: 'Маша'
}

// создаем геттер getName
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// создаем сеттер changeName
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Вывод: Маша

// изменяем свойство firstName 
student.changeName = 'Настя';

console.log(student.firstName); // Вывод: Настя