В этом руководстве вы узнаете о геттерах и сеттерах объектов в 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
связывает свойство объекта с методом, который будет вызываться при назначении этого свойства.