1. Как создать объект в JavaScript
Посмотрим на реальную задачу. Допустим, мы делаем сайт для книжного магазина. Как бы мы хранили информацию о книге, если бы пользовались только переменными?
let bookTitle = "Властелин колец";
let bookAuthor = "Дж. Р. Р. Толкин";
let bookYear = 1954;
let bookPrice = 1200;
Уже четыре переменные! А если книг много? А если у книги появится новое свойство (например, "жанр" или "наличие на складе")? Всё это становится неудобно, не говоря уже о том, что мы не можем сгруппировать данные, относящиеся к одной книге, в единую структуру.
Объекты позволяют собрать все свойства одной сущности в одно место и работать с ними как с единым целым.
Литерал объекта
Самый популярный способ — использовать литерал объекта. Это набор пар "ключ-значение", заключённых в фигурные скобки {}:
let book = {
title: "Властелин колец",
author: "Дж. Р. Р. Толкин",
year: 1954,
price: 1200
};
Здесь мы создали объект book с четырьмя свойствами: title, author, year и price.
Пустой объект и добавление свойств
Можно создать пустой объект и добавлять свойства по одному:
let user = {}; // пустой объект
user.name = "Алиса";
user.age = 25;
user.isAdmin = true;
Теперь у объекта user есть три свойства.
Квадратные скобки для ключей
Если имя свойства — строка с пробелами или цифрами, используйте квадратные скобки:
let car = {};
car["model name"] = "Tesla Model 3";
car["year"] = 2022;
Факт: В JavaScript все ключи объекта — строки (или символы, но о них позже). Даже если вы пишете car.year, это то же самое, что car["year"].
2. Доступ к свойствам объекта
Существует два основных способа получить или изменить свойство объекта:
Точечная нотация
Самый привычный и удобный способ:
console.log(book.title); // "Властелин колец"
book.price = 1300; // меняем цену
Квадратные скобки
Полезно, если имя свойства хранится в переменной или содержит "нестандартные" символы:
let prop = "author";
console.log(book[prop]); // "Дж. Р. Р. Толкин"
car["model name"] = "Tesla Model S";
console.log(car["model name"]); // "Tesla Model S"
Аналогия: Точечная нотация — как обращаться к соседу по имени: Петя.рост. Квадратные скобки — как искать кого-то по списку: жители["Петя"].
3. Методы объекта: что это и зачем нужны
Объекты могут не только хранить данные, но и выполнять действия — например, поприветствовать пользователя или рассчитать стоимость товара. Такие действия реализуются в виде методов — функций, которые являются свойствами объекта.
Добавление метода в объект
let user = {
name: "Алиса",
age: 25,
sayHello: function() {
console.log("Привет! Меня зовут " + this.name);
}
};
user.sayHello(); <span class="code text-gray">// Привет! Меня зовут Алиса</span>
Здесь sayHello — метод объекта user.
Ключевое слово this внутри метода всегда ссылается на сам объект.
Сокращённый синтаксис методов (ES6+)
Можно писать методы короче:
let user = {
name: "Боб",
sayHi() {
console.log("Привет, я " + this.name);
}
};
user.sayHi(); // Привет, я Боб
Почему важно использовать this
this — это ссылка на сам объект, внутри которого вызван метод.
Если бы мы написали:
let user = {
name: "Вася",
sayName: function() {
console.log(name); // Ошибка! name не определено
}
};
Код выдаст ошибку, потому что переменной name нет в области видимости функции.
Всегда используйте this.name, чтобы обратиться к свойству объекта из метода.
Практический пример: метод для изменения цены
Допустим, у нас есть объект book:
let book = {
title: "Властелин колец",
price: 1200,
setPrice(newPrice) {
this.price = newPrice;
}
};
book.setPrice(1500);
console.log(book.price); // 1500
4. Применение объектов в вашем учебном приложении
В предыдущих примерах мы работали с массивом товаров в интернет-магазине.
Давайте теперь создадим массив объектов, где каждый объект — это товар:
let products = [
{
name: "Книга",
price: 500,
quantity: 3,
showInfo() {
console.log(`Товар: ${this.name}, цена: ${this.price}, количество: ${this.quantity}`);
}
},
{
name: "Ручка",
price: 50,
quantity: 10,
showInfo() {
console.log(`Товар: ${this.name}, цена: ${this.price}, количество: ${this.quantity}`);
}
}
];
// Переберём массив и вызовем метод showInfo для каждого товара:
for (let i = 0; i < products.length; i++) {
products[i].showInfo();
}
Результат:
Товар: Книга, цена: 500, количество: 3
Товар: Ручка, цена: 50, количество: 10
5. Полезные нюансы
Удаление и проверка свойств
Оператор delete
Свойство можно удалить с помощью оператора delete:
delete user.age;
console.log(user.age); // undefined
Проверка наличия свойства
Для проверки, есть ли свойство в объекте, используйте оператор in:
console.log("name" in user); // true
console.log("age" in user); // false, если удалили
Перебор всех свойств объекта
Для перебора всех свойств объекта используется цикл for...in:
let user = {
name: "Алиса",
age: 25,
isAdmin: true
};
for (let key in user) {
console.log(key + ": " + user[key]);
}
Результат:
name: Алиса
age: 25
isAdmin: true
Обратите внимание: порядок свойств не гарантирован, но на практике обычно совпадает с порядком объявления.
Вложенные объекты
Свойством объекта может быть другой объект. Например, адрес пользователя:
let user = {
name: "Иван",
address: {
city: "Нью-Йорк",
street: "Уолл Стрит",
house: 10
}
};
console.log(user.address.city); // Нью-Йорк
Копирование объектов: поверхностное и глубокое
Если вы присвоите объект в другую переменную, копируется только ссылка, а не сам объект:
let user1 = { name: "Оля" };
let user2 = user1;
user2.name = "Катя";
console.log(user1.name); // "Катя" — оба имени изменились!
Для создания независимой копии используйте Object.assign или (для глубокого копирования) JSON:
let user3 = Object.assign({}, user1);
// или
let user4 = JSON.parse(JSON.stringify(user1));
6. Типичные ошибки при работе с объектами
Ошибка №1: обращение к несуществующему свойству Если попытаться получить свойство, которого нет — получите undefined, а не ошибку. Это может привести к "невидимым" багам, если не проверять наличие свойства.
Ошибка №2: забыли использовать this в методе Если внутри метода обратиться к свойству без this, JavaScript будет искать переменную в глобальной области видимости. Обычно такой переменной нет, и вы получите ошибку или undefined.
Ошибка №3: копирование объекта "по ссылке" Присваивание объекта переменной не создаёт его копию! Изменения через одну переменную видны через другую.
Ошибка №4: опечатка в имени свойства JavaScript не ругается на опечатки в ключах: если написать user.nmae, получите undefined, а не ошибку. Проверяйте имена свойств внимательно!
Ошибка №5: использование стрелочных функций для методов объекта Стрелочные функции не имеют собственного this. Если объявить метод объекта стрелкой, this будет не тем, что вы ожидаете:
let user = {
name: "Сергей",
sayHi: () => {
console.log(this.name); // undefined!
}
};
user.sayHi(); // undefined
Используйте обычные функции для методов объекта!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ