Объекты

1. Введение

При описании какой-то сущности: пользователя, гостя, продукта, необходима структура, позволяющая хранить все характеристики связно и в одном месте. В большинстве языков программирование для этого используется тип данных Object (объект).

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

Какие именно свойства (данные) и методы (функции обработки данных) должны быть в объекте решается каждый раз с учетом конкретной задачи.

2. Создание объекта

Объект — ассоциативный массив, тип данных, хранящий свойства (properties) и методы (methods).

Создание объекта через литерал похоже на создание массива, только используются фигурные {}, а не квадратные скобки.

const hotel = {};
Copy

При создании объект может быть инициализирован свойствами, каждое из которых описывается парами ключ:значение (key:value). Свойства разделяются запятой.

Ключ — это всегда строка. Значением могут быть любые типы: примитивы, массивы, объекты, були, функции и т. п.

Правила именования ключей просты:

• Если ключ заключен в кавычки, то это может быть произвольная строка.

• Если кавычек нет, то вступают ограничения — имя без пробелов, начинается на букву или символы _ и $.

Например, в программе для туроператора понадобится объект, описывающий отель: название, уровень сервиса, вместимость и т. п.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  capacity: 100,
};
Copy

3. Доступ к свойствам

Доступ к свойству объекта, для того чтобы получить или присвоить ему значение, может быть записан двумя способами:

• 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
Copy

4. Удаление свойств

Удалить свойство объекта можно с помощью оператора 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}
Copy

5. Отсутствующие свойства

Отсутствующее свойство, при обращении к нему по ключу, возвращает undefined.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  guests: ['mango', 'poly', 'ajax'],
};

console.log(hotel.stars); // 5
console.log(hotel.pool); // undefined
Copy

6. Короткие свойства

Часто есть переменные, например, 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}
Copy

7. Вычисляемые свойства

Иногда необходимо добавить к объекту поле с ключом, значение которого мы заранее не знаем, он хранится как значение переменной. Раньше для этого необходимо было сначала создать объект, а потом добавлять свойства через квадратные скобки.

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}
Copy

8. Методы объекта

Объекты хранят не только данные, но и функции для работы с этими данными. Если значение свойства - это функция, то оно называется методом объекта.

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!
Copy

8.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

Будет логично задуматься - почему бы не использовать при обращении к свойствам имя объекта. Дело в том, что имя объекта - штука не надежная, методы одного объекта можно копировать в другой (с другим именем), а в будущем мы узнаем, что часто при создании объекта мы заранее не знаем имени. Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.

Мы детально разберем ключевое слово this и все его подводные камни в следующих модулях, а сейчас достаточно просто использовать this при обращении к свойствами объекта в его методах.