Руководство по объектам в JavaScript

JavaScript — это объектно-ориентированный язык, а в JavaScript практически все является объектом или действует как объект. Таким образом, для эффективной работы с JavaScript нам необходимо понимать, как работают объекты, а также как создавать свои собственные объекты и использовать их.

Объект JavaScript — это просто набор именованных значений. Эти именованные значения обычно называют свойствами объекта. Как вы помните из раздела Массивы JavaScript, массив — это набор значений, где каждое значение имеет индекс (числовой ключ), который начинается с нуля и увеличивается на единицу для каждого значения. Объект похож на массив, но разница в том, что вы сами определяете ключи; например, это может быть имя, возраст, пол и т. д.

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

Объект может быть создан с помощью фигурных скобок {} с необязательным списком свойств. Свойство — это пара «ключ: значение», где ключ (или имя свойства) всегда является строкой, а значение (или значение свойства) может быть любого типа данных, например, строкой, числом, логическим значением или сложным типом данных — массивом, функцией и другим объектом. Кроме того, свойства с функциями в качестве их значений часто называют методами, отличающими их от других свойств. Типичный объект JavaScript может выглядеть так:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

В приведенном выше примере создается объект с именем person, который имеет три свойства name, age, и gender и один метод displayName(). Метод displayName() отображает значение this.name, которое преобразуется в person.name. Это самый простой и предпочтительный способ создания нового объекта в JavaScript, который называется object literals.

Имена свойств обычно не нужно заключать в кавычки, если они не являются зарезервированными словами, или если они содержат пробелы или специальные символы (любые, кроме букв, цифр и символов _ и $), или если они начинаются с цифры, как показано в следующем примере:

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

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

Чтобы получить доступ к значению свойства или извлечь его, вы можете использовать нотацию (.) Или квадратную скобку ([]), как показано в следующем примере:

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Выводит: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Выводит: 2000

Запись с точкой проще для чтения и записи, но ее не всегда можно использовать. Если имя свойства недопустимо (т. е. содержит пробелы или специальные символы), вы не можете использовать запись с точкой; вам придется использовать обозначение со скобками, как показано в следующем примере:

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Выводит: 8 July 2000

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Выводит: Peter (if enter "name")

Цикл по свойствам объекта

Вы можете перебирать пары ключ-значение объекта, используя цикл for...in. Этот цикл специально оптимизирован для перебора свойств объекта. Вот пример:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Выводит: name, age and gender
}

Установка свойств объекта

Точно так же вы можете установить новые свойства или обновить существующее, используя точку (.) или скобку ([]), как показано в следующем примере:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Выводит: United States

person["email"] = "peterparker@mail.com";
document.write(person.email); // Выводит: peterparker@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Выводит: 30

person["name"] = "Peter Parker";
document.write(person.name); // Выводит: Peter Parker

Удаление свойств объекта

Оператор delete может использоваться для полного удаления свойств из объекта. Удаление — это единственный способ фактически удалить свойство из объекта. Установка для свойства undefined или null только изменяет значение свойства. Они не удаляют свойство из объекта.

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Удаление свойства
delete person.age;
alert(person.age); // Выводит: undefined

Вызов методов объекта

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

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Выводит: Peter
person["displayName"](); // Выводит: Peter

Копирование массивов

Примитивные значения, такие как строки и числа, присваиваются или копируются как целое значение. Чтобы лучше понять все это, давайте посмотрим на следующий пример:

var message = "Hello World!";

var greet = message; // Присвойте переменную message новой переменной
greet = "Hi, there!";

document.write(message);  // Печатает: Hello World!
document.write(greet);  // Печатает: Hi, there!

В приведенном выше примере мы сделали копию переменной message и изменили значение этой копии (т. е. переменная greet). Две переменные остаются разными и раздельными. Но если мы сделаем то же самое с объектом, мы получим другой результат, как в следующем примере:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Присваиваем переменную person новой переменной
user.name = "Harry";

document.write(person.name);  // Печатает: Harry
document.write(user.name);  // Печатает: Harry

Как вы можете увидеть из примера, любые изменения, внесенные в переменную user, также изменяют переменную person; это происходит потому, что обе переменные ссылаются на один и тот же объект. Таким образом, простое копирование объекта на самом деле не клонирует его, а копирует ссылку на этот объект.