update func
This commit is contained in:
77
docs/javascript/02-objects/08-getter-setter.md
Normal file
77
docs/javascript/02-objects/08-getter-setter.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
# Свойства - геттеры и сеттеры
|
||||
|
||||
## Геттеры и сеттеры
|
||||
Свойства-аксессоры представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set
|
||||
```js
|
||||
let obj = {
|
||||
get propName() {
|
||||
// геттер, срабатывает при чтении obj.propName
|
||||
},
|
||||
|
||||
set propName(value) {
|
||||
// сеттер, срабатывает при записи obj.propName = value
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Дескрипторы свойств доступа
|
||||
Дескрипторы свойств-аксессоров отличаются от «обычных» свойств-данных.
|
||||
|
||||
Свойства-аксессоры не имеют `value` и `writable`, но взамен предлагают функции `get` и `set`.
|
||||
|
||||
То есть, дескриптор аксессора может иметь:
|
||||
- **get** – функция без аргументов, которая сработает при чтении свойства,
|
||||
- **set** – функция, принимающая один аргумент, вызываемая при присвоении свойства,
|
||||
- **enumerable** – то же самое, что и для свойств-данных,
|
||||
- **configurable** – то же самое, что и для свойств-данных.
|
||||
|
||||
Например, для создания аксессора `fullName` при помощи `defineProperty` мы можем передать дескриптор с использованием `get` и `set`
|
||||
```js
|
||||
let user = {
|
||||
name: "John",
|
||||
surname: "Smith"
|
||||
};
|
||||
|
||||
Object.defineProperty(user, 'fullName', {
|
||||
get() {
|
||||
return `${this.name} ${this.surname}`;
|
||||
},
|
||||
set(value) {
|
||||
[this.name, this.surname] = value.split(" ");
|
||||
}
|
||||
});
|
||||
alert(user.fullName); // John Smith
|
||||
for(let key in user) alert(key); // name, surname
|
||||
```
|
||||
|
||||
## Умные геттеры/сеттеры
|
||||
Геттеры/сеттеры можно использовать как обёртки над «реальными» значениями свойств, чтобы получить больше контроля над операциями с ними.
|
||||
|
||||
Например, если мы хотим запретить устанавливать короткое имя для `user`, мы можем использовать сеттер `name` для проверки, а само значение хранить в отдельном свойстве `_name`:
|
||||
```js
|
||||
let user = {
|
||||
get name() {
|
||||
return this._name;
|
||||
},
|
||||
|
||||
set name(value) {
|
||||
if (value.length < 4) {
|
||||
alert("Имя слишком короткое, должно быть более 4 символов");
|
||||
return;
|
||||
}
|
||||
this._name = value;
|
||||
}
|
||||
};
|
||||
|
||||
user.name = "Pete";
|
||||
alert(user.name); // Pete
|
||||
|
||||
user.name = ""; // Имя слишком короткое...
|
||||
```
|
||||
|
||||
## Использование для совместимости
|
||||
У аксессоров есть интересная область применения – они позволяют в любой момент взять «обычное» свойство и изменить его поведение, поменяв на геттер и сеттер.
|
||||
Reference in New Issue
Block a user