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

Объект в JavaScript – это неупорядоченная коллекция свойств, состоящая из пар «ключ-значение». Каждое свойство должно иметь уникальное имя (ключ), которое должно быть строкой. Значение свойства может быть любым: как значением простого типа, так и другим объектом.

В JavaScript есть три категории объектов:

  1. Объекты базового типа – это объекты, определяемые спецификацией ECMAScript. Например, Массивы (array), функции (function), даты (date) и регулярные выражения (RegExp) являются объектами базового типа.
  2. Объекты среды выполнения – это объекты, определённые в среде выполнения (такой как web-браузер). Например, объекты типа HTMLElement, представляющие структуру веб-страницы в клиентском JavaScript, являются объектами среды выполнения.
  3. Пользовательские объекты – это любой объект, созданный в результате выполнения программного кода JavaScript.

Как вы помните, в уроке о типах данных JavaScript говорилось, что объекты являются изменяемыми значениями и операции с ними выполняются по ссылке, а не по значению (как с примитивами). Если переменная obj_1 ссылается на объект, и выполняется инструкция var obj_2 = obj_1;, в переменную obj_2 будет записана ссылка на тот же самый объект, а не его копия. Любые изменения, которым подвергается объект с помощью переменной obj_2, будут так же отражаться на переменной obj_1.

Объекты JavaScript можно создавать с помощью объектных литералов, ключевого слова new и (в стандарте ECMAScript 5) функции Object.create().

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

Ниже приводится несколько примеров создания объектов:

Создание объектов с помощью {}
var cat = {};                  // Объект без свойств
cat.name = "Васька";                    // добавили свойство
cat.["full name"] = "Васька-шалун";           // добавили свойство с пробелом
var point = { x: 5, y: 7 };             // Два свойства

var author = {                          // Имена свойств с пробелами и дефисами,
    "first-name": "John",               // поэтому в кавычках
    "last name": "White"
};

var foo = { "for": "all­audiences" };    // for – зарезервированное слово, 
                                        // поэтому в кавычках 

JavaScript знает, что имена свойств (ключи) всегда строковые, поэтому кавычки вокруг имени свойства в литерале объекта указывать не обязательно. В этом случае имена свойств должны соответствовать тем же правилам, что и имена переменных: например, в них не должно быть пробелов, дефисов или знаков пунктуации. Если в качестве имени выступает зарезервированное слово JavaScript – его требуется брать кавычки. В ECMAScript 5 допускается использовать зарезервированные слова в качестве имен свойств без кавычек.

На заметку: Записи cat['name'] и cat.name идентичны, но квадратные скобки позволяют использовать в качестве имени свойства любую строку.

Оператор new создает и инициализирует новый объект. После ключевого слова new должен находиться вызов функции. Используемая таким образом функция называется конструктором. Базовый JavaScript включает множество встроенных конструкторов для создания объектов базового языка.

Ниже приведен ряд примеров создания встроенных типов:

Оператор new: создание объектов
var o = new Object();                  // Создать новый пустой объект: то же, что и {}
var a = new Array();                   // Создать пустой массив: то же, что и []
var d = new Date();                    // Создать объект Date с текущими временем и датой 
var r = new RegExp("javascript", "i"); // Создать объект регулярного выражения    

Кроме этих встроенных конструкторов вы можете определять свои собственные функции-конструкторы для инициализации вновь создаваемых объектов. Подробнее, как это делается, мы рассмотрим в следующем уроке.

Прежде чем рассмотреть методику создания объектов через функцию Object.create(), необходимо понять, что такое прототипы. Очевидно, что при написании реального кода перед нами нередко будет ставиться задача о необходимости создания одинаковых или просто похожих объектов. И естественно, мы не должны каждый такой объект создавать вручную.
На помощь нам придет конструктор.

Конструктор в JavaScript – это обычная функция, которая используется с оператором new для создания специализированного типа объекта:

Функция-конструктор
function Animal() {
  this.name = name;                              // свойство объекта
  this.lags = 4;                                 // свойство объекта
  this.show_name=function() {alert(this.name);}  // метод объекта
}

var cat = new Animal("Мурзик");

Для установки свойств и методов объекта используется ключевое слово this.

Мы создали новый объект cat, у которого есть два свойства и один метод, сделали мы это с помощью функции-конструктора Animal. В данном случае Animal – класс, cat – экземпляр.

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

Выполнить код »

Важно отметить, что свойство «color» добавляется только к экземпляру cat. Другие экземпляры Animal не будут содержать свойство «color». Но что делать, если мы мы хотим добавить свойство ко всем экземплярам класса? Каждое животное имеет цвет, а не только кошки, поэтому свойство «color» имеет отношение ко всем животным. Вот где понадобится прототип объекта JavaScript.

В JavaScript каждый объект имеет свойство prototype. Прототип объекта позволяет нам добавлять свойства ко всем экземплярам этого класса (даже к существующим экземплярам). Например:

Выполнить код »

Prototype – это хранилище общих методов и свойств для всех экземпляров одного класса.
Каждый экземпляр (объект) класса Animal наследует свойства прототипа. Объекты, созданные с помощью ключевого слова new и функции-конструктора, имеют в качестве своего прототипа значение свойства prototype. Например, объект new Object() имеет прототип Object.prototype, как и объект, созданный с помощью литерала {}. Аналогично прототипом объекта, созданного выражением new Array(), является Array.prototype, а прототипом объекта, созданного выражением new Date(), является Date.prototype.

Object.prototype – один из немногих объектов, которые не имеют прототипа: у него нет унаследованных свойств. Другие объекты-прототипы являются самыми обычными объектами, имеющими собственные прототипы.

Все встроенные и большинство пользовательских конструкторов имеют прототипы, наследуемые от Object.prototype.

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

Синтаксис
Object.create(prototype, descriptors)

Чтобы создать объект, не имеющий прототипа, можно передать в качестве первого аргумента значение null, но в этом случае вновь созданный объект не унаследует никаких-либо свойств, ни базовых методов, таких как toString() (а это означает, что этот объект нельзя будет использовать в выражениях с оператором +):

Выполнить код »

Если в коде потребуется создать обычный пустой объект, который, например, возвращается литералом {} или выражением new Object(), передайте в первом аргументе Object.prototype:

Выполнить код »

Чтобы создать объект с прототипом необходимо в качестве первого аргумента передать прототип объекта:

Выполнить код »

В этом случае мы сначала определяем объект-прототип prototypeObject, а затем используем Object.create для создания нового объекта, который наследуется prototypeObject. Здесь мы добавили свойства firstName и lastName после создания объекта. Но, что если нам нужно, чтобы мы могли добавлять эти свойства сразу при создании объекта? Для этого мы будем использовать второй аргумент метода Object.create().

Если указан второй аргумент метода Object.create() и он не равен undefined, то он должен быть объектом. Требуется, чтобы этот объект имел собственные перечисляемые свойства, то есть такие, которые определены на самом объекте, а не унаследованы по цепочке прототипов. Эти свойства указывают дескрипторы свойств, добавляемых в новый объект. Имена добавляемых свойств совпадают с именами свойств в этом объекте.

Выполнить код »
  • Объект в JavaScript – это неупорядоченная коллекция свойств, состоящая из пар «ключ-значение».
  • Объекты JavaScript можно создавать с помощью объектных литералов, ключевого слова new и (в стандарте ECMAScript 5) функции Object.create().
  • Функции, которые предназначены для создания объектов, называются конструкторами. Их названия пишут с большой буквы, чтобы отличать от обычных.
  • Конструктор в JavaScript – это обычная функция, которая используется с оператором new для создания специализированного типа объекта.
  • Для установки свойств и методов объекта используется ключевое слово this.
  • Прототип объекта позволяет нам добавлять свойства ко всем экземплярам этого класса (даже к существующим экземплярам).
  • Объекты, созданные с помощью функции-конструктора, имеют общий прототип. Доступ к данному прототипу можно получить через свойство prototype объекта функции-конструктора.
  • Метод Object.create(), создает новый объект и использует свой первый аргумент в качестве прототипа этого объекта. Дополнительно Object.create() может принимать второй необязательный аргумент, описывающий свойства нового объекта.

  • Литерал объекта

    1. Используя литерал объекта создайте пустой объект cat.
    2. Добавьте свойство name со значением "Мурка".
    3. Добавьте свойство lags со значением 4.
    4. Добавьте свойство color со значением "Черепаховый".
    5. Добавьте свойство full name со значением "Мурка Филомена Уси-Пусечка".
    6. Выведите full name через alert.
    Показать решение

    Решение:

    Выполнить код »
  • Конструктор и оператор new

    1. Напишите функцию-конструктор Person, которая принимает два параметра: name (имя) и age (возраст).
    2. С помощью оператора new создайте объект person_1, передающий в функцию-конструктор аргументы: имя "Вася" и возраст 33.
    3. Выведите свойства объекта person_1 через alert.
    4. Добавьте к шаблону объекта Person свойство specialty с помощью prototype. Значением свойства будет "юрист-консультант".
    5. Выведите свойство specialty объекта person_1 через alert.
    Показать решение
    Выполнить код »
  • Object.create()

    1. Используя литерал объекта создайте объект cat с тремя свойствами: name, legs и color.
    2. С помощью Object.create() создайте объект kitten объектом-прототипом которого будет cat.
    3. Выведите свойства объекта kitten через alert.
    var cat = { 
    legs: 4,
    name: "Гармония", 
    color: "Черепаховый"
    };
    // ваш код
    
    Показать решение

    Решение:

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).