Объектная модель JavaScript

176
посл. ред. 27.12.2016

JavaScript - это объектно-ориентированный язык. Это значит, что основными элементами языка являются объекты. Каждый объект характеризуется набором свойств и методов. Свойства содержат определенную информацию об объекте, которую в большинстве случаев можно менять. Значением свойства могут быть примитивные значения или другие объекты. Методы - это вызываемые действия с объектами, которые можно выполнить как функции. Как и для функций, вызов метода происходит при добавлении круглых скобок к имени метода. Фактически методы тоже являются свойствами, но их принято называть методами, чтобы сразу понимать, о чем идет речь. JavaScript и браузер имеют встроенные объекты, а также пользователь может создавать свои собственные.

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

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

Оператор new

Для вызова конструктора используется оператор new:

var date = new Date(); /* объект класса Date */
var arr = new Array(); /* объект класса Array */

Для создания пустого объекта используется базовый конструктор Object. Можно воспользоваться одним из способов:

var obj_1 = new Object(); /* пустой объект класса Object */
var obj_2 = {}; /* пустой объект класса Object */

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

Оператор instanceof

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

var date = new Date();
alert(date instanceof Date); // true
alert(date instanceof Array); // false

Свойства и методы

При создании объекту можно сразу присвоить свойства и методы. Они перечисляются через запятую в формате свойство: значение:

var address = {
  street: 'Заречная',
  house: 101
};

В данном примере street и house - это свойства объекта address. Их можно указывать в кавычках:

var address = {
  'street': 'Заречная',
  "house": 101
};

Обращение к свойству или методу объекта происходит через точку:

var address = {
  street: 'Заречная',
  house: 101,
  distanceTo: function() {
    alert('Расчет расстояния...');
  }
};

alert(address.street);
alert(address.distanceTo);
address.distanceTo();

В данном примере distanceTo - это метод объекта address. При обращении без скобок distanceTo ведет себя как свойство. При добавлении скобок метод выполняется.

Если обратиться к несуществующему свойству объекта, JavaScript не выдаст ошибку (как в случае с переменными), а вернет undefined.

Новое свойство (метод) объекта создается операцией присвоения:

var car = {}; /* создан пустой объект car */
car.color = 'red'; /* добавлено свойство color со значением 'red' */

Переменная this

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

var address = {
  street: 'Заречная',
  distanceTo: function() {
    alert('Расчет расстояния до ' + this.street);
  }
};

address.distanceTo();

Оператор in

Наличие свойства у объекта проверяется оператором in. Записывается так 'prop' in obj, где 'prop' - это искомое свойство (обязательно должно быть в кавычках), а obj - это объект, в котором идет поиск. Оператор возвращает значение true, если свойство найдено, или false в противном случае.

var car = {
  color: 'red'
};
if ('color' in car) alert('Свойство color: ' + car.color);

Оператор delete

Для удаления свойств (методов) объектов используется оператор delete. Оператор возвращает true, если удаление прошло успешно, или false в противном случае.

var car = {
  color: 'red'
};
if ('color' in car) alert('Свойство color: ' + car.color);
delete car.color;
if (!('color' in car)) alert('Свойство удалилось');

К свойствам и методам можно обращаться с использованием квадратных скобок:

address['street'] /* сработает как address.street */
address['distanceTo']() /* сработает как address.distanceTo() */

Строка в квадратных скобках содержит имя свойства. Это позволяет использовать различные имена свойств:

address['street or avenue'] /* сработает только в таком виде */

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

var prop = 'street';
alert(address[prop]); /* сработает только в таком виде */

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

Перебор свойств, цикл for…in

Для перебора свойств объектов используется специальный цикл for…in. Записывается так:

for (prop in obj) {
  /* тело цикла */
};

Условием выполнения цикла является наличие свойства у объекта. Цикл выполняется до тех пор, пока не переберет все свойства. В переменную prop помещается имя свойства. Соответственно, если врутри цикла потребуется обратиться к данному свойству, то нужно использовать запись с квадратными скобками obj[prop].

var address = {
  street: 'Заречная',
  house: 101
};

for (var prop in address) {
  alert(prop + ' - ' + address[prop]);
}