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"
};
Начиная с ECMAScript 5, зарезервированные слова могут использоваться в качестве имен свойств объекта без кавычек. Тем не менее, вы должны избегать этого для лучшей совместимости.
Доступ к свойствам объекта
Чтобы получить доступ к значению свойства или извлечь его, вы можете использовать нотацию (.
) Или квадратную скобку ([]
), как показано в следующем примере:
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
Оператор delete
удаляет только свойство объекта или элемент массива. он не влияет на переменные или объявленные функции. Однако вам следует избегать оператора delete
для удаления элемента массива, так как он не меняет длину массива, а просто оставляет «дыру» в массиве.
Вызов методов объекта
Вы можете получить доступ к методу объекта так же, как к свойствам — используя запись с точками или квадратными скобками. Вот пример:
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
; это происходит потому, что обе переменные ссылаются на один и тот же объект. Таким образом, простое копирование объекта на самом деле не клонирует его, а копирует ссылку на этот объект.