JS для начинающих. Урок 1.13: Объекты

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

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

Литералы объектов

Как и у любого другого типа данных в js у объектов существуют литералы. Они представляют собой заключённые в фигурные скобки набор пар «ключ-значение». Ключ представляет собой любой допустимый идентификатор или строку и является именем свойства. Значением свойства может быть любой литерал или выражение, в том числе и объект. Объект так же может быть пустым и не содержать ни одного свойства.

{}; // пустой объект
{x: 1, y: 2}; // точка на плоскости
{x: 1, y: 2, width: 100, height: 250}; // прямоугольник
{login: 'true-coder',  rating: 110}; // пользователь

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

Самый простой способ создания объекта это инициализация переменной объектом-литералом.

var empty = {};
var point = {x: 1, y: 3};
var rectangle = {
  position: {
    x: 10,
    y: 20
  },
  size: {
    width: 100,
    height: 200
  }  
};

Обратите внимание на то, как отформатирован код, инициализирующий объект rectangle. Длинные списки свойств лучше воспринимаются, если записаны в столбик. Я рекомендую вам придерживаться такого стиля оформления кода.

Существует другая разновидность объектов, инициализация которых проходит при помощи оператора new и функции-конструктора, которая может быть как встроенной, так и созданной программистом, например, создать пустой объект так же можно при помощи функции-конструктора Object:

var empty =  new Object();

Создавать таким способом пустой объект не стоит хотя бы потому, что этот синтаксис банально длиннее.

Другим примером встроенной функции-конструктора может служить Date:

var now = new Date(); // объект, содержащий текущее время и дату

Более подробно мы рассмотрим функции-конструкторы в следующих уроках.

Свойства объектов

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

var  point = {x: 2, y: 3};
console.log(point.x, point.y); // 2, 3

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

var  point = {x: 2, y: 3};
console.log(point.x, point.y); // 2, 3
point.x = 10;
point.y = 3;
console.log(point.x, point. y); // 10, 3

Так же можно инициализировать ещё не существующие в объекте свойства

var user = {login: 'true-coder'};
user.rating = 100;
console.log(user.rating); // 100

При попытке получить значение неинициализированного свойства объекта ошибки не возникает. В этом случае возвращается специальное значение undefined:

var point = {x: 2, y: 3};
console.log(point.z); // undefined

Оператор in

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

var point = {x: 1, y: 2};
console.log('x' in point); // true 
console.log('z' in point); // false

Обратите внимание, что если свойство объекта было инициализировано значением undefined, то оператор in вернёт true при проверке на наличие этого свойства у объекта:

var point = {x: 1, y: 2, z: undefined};
console.log('z' in point); // true

Оператор delete

Этот оператор предназначен для удаления свойств объектов.

var point = {x: 1, y: 2};
delete point.x;
console.log(point.x); // undefined

Обратите внимание, что присваивание свойству значения undefined фактически не удаляет свойство и оператор in вернёт true если его использовать для проверки существования такого свойства.

var point = {x: 1, y: 2};
delete point.x;
point.y = undefined;
console.log('x' in point); // false
console.log('y' in point); // true

Объекты как ассоциативные массивы

Кто знаком с php, мог проследить аналогию между объектами в JavaScript и ассоциативными массивами в php. Рассматривать объект в js как ассоциативный массив можно ещё и потому, что обращение к его свойствам, как и к элементам массива можно осуществить при помощи оператора []. Обращение к свойству объекта при помощи этого оператора производится с указанием имени свойства, содержащегося в строке.

var  point = {x: 1, y: 2};
console.log(point['x']); // 1

Чаще всего это бывает полезно, когда необходимо динамически, в ходе выполнения скрипта определить имя свойства, к которому нужно обратиться. Например, имя свойства, к которому необходимо обратится, каким-то образом зависит от действий пользователя. В этом случае произвести обращение к нему невозможно при помощи оператора «точка» поскольку на момент запуска скрипта имя свойства неизвестно.

Объекты это ссылочный тип данных

Это, пожалуй, одна из самых важных вещей, которую нужно помнить при работе с объектами.

Кроме ссылочных в js существуют так же и элементарные (иногда их называют примитивными) типы данных. Числа, логические значения и специальные значения undefined и null являются размерными типами. Объекты – это ссылочный тип данных.

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

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

var p1= {x: 1, y: 2},
  p2 = p1; // скопировали ссылки, а не значения!
 
p2.x = 10;
console.log(p1.x); // 10

На этом всё! Более подробно про объекты и про ООП в js вы узнаете в следующих уроках.

Успехов вам!