Геттеры и сеттеры (get и set) объектов в JavaScript

В этом руководстве вы узнаете о геттерах и сеттерах объектов в JavaScript и о том, как их эффективно использовать.

В следующем примере определяется класс с именем Person :

class Person {
    constructor(name) {
        this.name = name;
    }
}
let person = new Person("John");
console.log(person.name); // John

Класс Person имеет name свойства и конструктор. Конструктор инициализирует свойство name строкой.

Иногда вы не хотите, чтобы к свойству name обращались напрямую, как здесь:

person.name

Для этого вы можете придумать пару методов, которые манипулируют свойством name. Например:

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}
let person = new Person('Jane Doe');
console.log(person); // Jane Doe 
person.setName('Jane Smith');
console.log(person.getName()); // Jane Smith

В этом примере класс Person имеет свойство name. Кроме того, у него есть два дополнительных метода getName() и setName().

Метод getName() возвращает значение свойства name.

Метод setName() присваивает аргумент свойству name. Функция setName() удаляет пробелы с обоих концов аргумента newName и выдает исключение, если newName пуст.

constructor() вызывает метод setName() для инициализации свойства name :

constructor(name) { 
    this.setName(name); 
}

getName() и setName() известны как геттер и сеттер в других языках программирования, таких как Java и C++.

ES6 предоставляет специальный синтаксис для определения геттера и сеттера с использованием ключевых слов get и set:

class Person {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}

Как это работает:

• Во-первых, свойство name изменено на _name, чтобы избежать конфликта имен с геттером и сеттером.
• Во-вторых, геттер использует ключевое слово get, за которым следует имя метода:

get name() { 
    return this._name; 
}

Синтаксис:

let name = person.name;

Когда JavaScript видит доступ к свойству name класса Person, он проверяет, есть ли у класса Person какое-либо свойство name.

Если нет, JavaScript проверяет, есть ли в классе Person какой-либо метод, который привязывается к свойству name. В этом примере метод name() привязывается к свойству name через ключевое слово get. Как только JavaScript находит метод получения, он выполняет метод получения и возвращает значение.

• В-третьих, сеттер использует ключевое слово set, за которым следует имя метода:

set name(newName) {
    newName = newName.trim();
    if (newName === '') {
        throw 'The name cannot be empty';
    }
    this._name = newName;
}

JavaScript вызовет установщик name(), когда вы присвоите значение свойству name следующим образом:

person.name = 'Jane Smith';

Если у класса есть только геттер, но нет сеттера, и вы пытаетесь использовать сеттер, изменение не будет иметь никакого эффекта. См. следующий пример:

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
}
let person = new Person("Jane Doe");
console.log(person.name);
// attempt to change the name, but cannot 
person.name = 'Jane Smith';
console.log(person.name); // Jane Doe

В этом примере класс Person имеет средство получения name, но не средство задания name. Он пытается вызвать сеттер. Однако это изменение не вступает в силу, поскольку класс Person не имеет установщика имени.

Использование геттера в литерале объекта

В следующем примере определяется геттер с именем latest для возврата последнего участника объекта meeting :

let meeting = {
    attendees: [],
    add(attendee) {
        console.log(`$ {
            attendee
        }
        joined the meeting.`);
        this.attendees.push(attendee);
        return this;
    },
    get latest() {
        let count = this.attendees.length;
        return count == 0 ? undefined: this.attendees[count - 1];
    }
};
meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is $ {
    meeting.latest
}.`);

Выход:

John joined a meeting. 
Jane joined a meeting. 
Peter joined a meeting. 
The latest attendee is Peter.

Заключение

• Используйте ключевые слова get и set чтобы определить геттеры и сеттеры JavaScript для класса или объекта.
• Ключевое слово get связывает свойство объекта с методом, который будет вызываться при поиске этого свойства.
• Ключевое слово set связывает свойство объекта с методом, который будет вызываться при назначении этого свойства.