Объекты
1. Введение
При описании какой-то сущности: пользователя, гостя, продукта, необходима структура, позволяющая хранить все характеристики связно и в одном месте. В большинстве языков программирование для этого используется тип данных Object (объект).
С точки зрения языка программирования, объект - это набор свойств и методов. С точки зрения разработчика, объект - это абстракция, описывающая какие-то данные и функции для обработки этих данных.
Какие именно свойства (данные) и методы (функции обработки данных) должны быть в объекте решается каждый раз с учетом конкретной задачи.
2. Создание объекта
Объект — ассоциативный массив, тип данных, хранящий свойства (properties) и методы (methods).
Создание объекта через литерал похоже на создание массива, только используются фигурные {}, а не квадратные скобки.
const hotel = {};
CopyПри создании объект может быть инициализирован свойствами, каждое из которых описывается парами ключ:значение (key:value). Свойства разделяются запятой.
Ключ — это всегда строка. Значением могут быть любые типы: примитивы, массивы, объекты, були, функции и т. п.
Правила именования ключей просты:
Если ключ заключен в кавычки, то это может быть произвольная строка.
Если кавычек нет, то вступают ограничения — имя без пробелов, начинается на букву или символы
_и$.
Например, в программе для туроператора понадобится объект, описывающий отель: название, уровень сервиса, вместимость и т. п.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
};
Copy3. Доступ к свойствам
Доступ к свойству объекта, для того чтобы получить или присвоить ему значение, может быть записан двумя способами:
object.key— через точку.object["key"]— через квадратные скобки с именем ключа в кавычках.
На место обращения будет возвращено значение свойства с таким ключом.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
};
console.log(hotel.name); // Resort Hotel
console.log(hotel['name']); // Resort Hotel
hotel.name = 'Coastline Resort';
console.log(hotel.name); // Coastline Resort
console.log(hotel['name']); // Coastline Resort
hotel['name'] = 'Stardust Hotel';
console.log(hotel.name); // Stardust Hotel
console.log(hotel['name']); // Stardust Hotel
CopyЕсли при записи значения по ключу, такого ключа в объекте нет, он будет создан.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
};
hotel.address = '1, Beach ave.';
hotel['manager'] = 'Chuck Norris';
console.log(hotel.address); // 1, Beach ave.
console.log(hotel.manager); // Chuck Norris
Copy4. Удаление свойств
Удалить свойство объекта можно с помощью оператора delete. Удаление свойств - операция крайне редкая, чаще всего свойства только добавляются или изменяются.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
};
delete hotel.name;
console.log(hotel); // {stars: 5, capacity: 100}
delete hotel['stars'];
console.log(hotel); // {capacity: 100}
Copy5. Отсутствующие свойства
Отсутствующее свойство, при обращении к нему по ключу, возвращает undefined.
const hotel = {
name: 'Resort Hotel',
stars: 5,
guests: ['mango', 'poly', 'ajax'],
};
console.log(hotel.stars); // 5
console.log(hotel.pool); // undefined
Copy6. Короткие свойства
Часто есть переменные, например, name и stars, и мы хотим использовать их в объекте так, чтобы имя переменной стало ключом, а значение переменной - значением свойства. При объявлении объекта в этом случае достаточно указать только имя свойства, а значение будет взято из переменной с аналогичным именем. Это - синтаксис коротких свойств (shorthand properties).
let name = 'Resort Hotel';
let stars = 5;
// Эта ES5 запись избыточна
const es5hotel = {
name: name,
stars: stars,
capacity: 100,
};
/*
* ES6 Shorthand properties
* Имя ключа будет аналогично имени переменной
* Значение свойства будет равно значению переменной
*/
const es6hotel = {
name,
stars,
capacity: 100,
};
console.log(es6hotel); // {name: "Resort Hotel", stars: 5, capacity: 100}
Copy7. Вычисляемые свойства
Иногда необходимо добавить к объекту поле с ключом, значение которого мы заранее не знаем, он хранится как значение переменной. Раньше для этого необходимо было сначала создать объект, а потом добавлять свойства через квадратные скобки.
const key = 'person';
const object = {};
object[key] = 'Mango';
console.log(object); // {person: 'Mango'}
CopyИспользуя вычисляемые свойства, можно избежать лишнего кода и в некоторых случаях значительно его упросить. Значением вычисляемого свойства может быть любое валидное выражение.
const key = 'person';
const getKey = function () {
return 'age';
};
// Computed properties
const object = {
[key]: 'Mango',
[getKey()]: 2,
};
console.log(object); // {person: 'Mango', age: 2}
Copy8. Методы объекта
Объекты хранят не только данные, но и функции для работы с этими данными. Если значение свойства - это функция, то оно называется методом объекта.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
// Так метод объявлялся в ES5
greetInES5: function () {
console.log('Welcome!');
},
// Так метод объявляется в ES6
greetInES6() {
console.log('Welcome!');
},
};
hotel.greetInEs5(); // Welcome!
hotel.greetInEs6(); // Welcome!
CopyТак как методы - это обычные свойства, значение которых - это функция, их можно добавлять или удалять в любой момент.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
};
hotel.greet = function () {
console.log('Welcome!');
};
hotel.greet(); // Welcome!
Copy8.1. Доступ к объекту через this
Методы используются для изменения свойств объекта. Для доступа к текущему объекту в методе используется не имя объекта, а ключевое слово this - контекст. Значением this является объект перед 'точкой', в контексте которого вызван метод.
const hotel = {
name: 'Resort Hotel',
stars: 5,
capacity: 100,
showName() {
console.log(this.name);
},
changeCapacity(value) {
this.capacity = value;
},
};
hotel.showName(); // Resort Hotel
hotel.changeCapacity(200);
console.log(hotel.capacity); // 200
CopyЗначение this определяется в момент вызова функции, а не в момент ее объявления. То есть во время вызова hotel.showName(), в this внутри функции showName будет записана ссылка на объект hotel.
Будет логично задуматься - почему бы не использовать при обращении к свойствам имя объекта. Дело в том, что имя объекта - штука не надежная, методы одного объекта можно копировать в другой (с другим именем), а в будущем мы узнаем, что часто при создании объекта мы заранее не знаем имени. Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.
Last updated