Карта сайта

Урок 12: Объекты в JavaScript’е (создание, свойства, методы)

/Уроки по JavaScript/Урок 12: Объекты в JavaScript’е (создание, свойства, методы)
Урок 12: Объекты в JavaScript’е (создание, свойства, методы)
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы погрузимся в одну из самых важных тем JavaScript, это объекты. Это фундаментальная концепция, которая поможет вам структурировать данные и создавать сложные приложения. Давайте начнём!

Что такое объекты?

Объекты в JavaScript это структуры данных, которые хранят информацию в виде пар ключ-значение. Представьте, что объект это ящик с папками: каждая папка имеет название (ключ) и содержимое (значение). Например, объект user может содержать данные о пользователе: имя, возраст, email.

Объекты используются для:

  • Группировки связанных данных.
  • Создания сложных структур (например, моделирование реальных сущностей).
  • Организации методов (функций внутри объектов).

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

Есть несколько способов создать объект. Рассмотрим три основных.

1. Литерал объекта (самый популярный способ)

Синтаксис: фигурные скобки {}.

const user = {  
  name: "Анна",  
  age: 25,  
  email: "anna@example.com",  
  isAdmin: false  
};

2. Конструктор new Object()

Менее распространён, но полезен в некоторых случаях.

const car = new Object();  
car.model = "Tesla Model S";  
car.year = 2025;

3. Фабричные функции

Функция, которая возвращает объект.

function createBook(title, author, pages) {  
  return {  
    title: title,  
    author: author,  
    pages: pages  
  };  
}  

const book = createBook("JavaScript Basics", "Иван Петров", 300);

Доступ к свойствам объекта

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

1. Через точку

console.log(user.name); // "Анна"  
user.age = 26; // Изменили возраст

2. Через квадратные скобки

Полезно, если имя свойства хранится в переменной или содержит пробелы.

const property = "email";  
console.log(user[property]); // "anna@example.com"  

user["isAdmin"] = true; // Изменили статус

Методы объектов

Методы это функции, которые являются свойствами объекта. Они позволяют объекту «действовать».

Пример метода

const user = {  
  name: "Анна",  
  greet: function() {  
    console.log(`Привет, меня зовут ${this.name}!`);  
  }  
};  

user.greet(); // "Привет, меня зовут Анна!"

Ключевое слово this

this ссылается на текущий объект. В примере выше this.name означает свойство name объекта user.

Практические задачи

Попробуйте решить задачи самостоятельно, а потом сверьтесь с решениями.

Задача 1: Создание объекта

Создайте объект movie со свойствами:

  • title (название фильма).
  • director (режиссёр).
  • year (год выпуска).
  • Метод getInfo(), который возвращает строку: «[название], реж. [режиссёр], [год]».

Решение:

const movie = {  
  title: "Интерстеллар",  
  director: "Кристофер Нолан",  
  year: 2014,  
  getInfo: function() {  
    return `${this.title}, реж. ${this.director}, ${this.year}`;  
  }  
};  

console.log(movie.getInfo());

Задача 2: Динамическое добавление свойств

Напишите функцию addProperty(obj, key, value), которая добавляет свойство key со значением value в объект obj.

Решение:

function addProperty(obj, key, value) {  
  obj[key] = value;  
}  

const car = { model: "Tesla" };  
addProperty(car, "color", "красный");  
console.log(car.color); // "красный"

Задача 3: Удаление свойств

Создайте объект student с свойствами name, age, course. Удалите свойство course.

Решение:

const student = {  
  name: "Максим",  
  age: 22,  
  course: "JavaScript"  
};  

delete student.course;  
console.log(student); // { name: "Максим", age: 22 }

Частые ошибки

  1. Использование this вне метода
    this работает только внутри функций-методов объекта. В обычных функциях оно ссылается на глобальный объект.
  2. Путаница между точкой и квадратными скобками 
    user.age = 30; // Верно.  
user["age"] = 30; // Тоже верно.  
const key = "age";  
user.key = 30; // Ошибка! Добавит свойство "key", а не "age".

Заключение

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

Если хотите глубже изучить JavaScript, переходите к полному курсу. Там вас ждут ещё много уроков, практические задания и поддержка!