Стать программистом. Часть 22. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы с Вами закончили ознакомления с темой Functions (Функции). Мы рассмотрели сущности, которые мы можем передавать функции в виде аргументов, привели практические примеры. Надеюсь тема функций не показалась Вам слишком сложной. Если будут вопросы - пишите в комментариях.

Ну а мы движемся дальше. Представьте себе, что почти все предыдущие уроки были всего лишь прелюдией. Мы занимались сбором информации для того чтобы наконец-то подойти к одной из самых интересных сущностей в JavaScript'e - Objects (Объектам). В этом уроке мы с Вами начнем знакомится с ними, а в последующих - продолжим углубляться в данную тему.

Начнем.

Урок 22. Objects (Объекты).

В одном из наших предыдущих уроков мы с вами рассматривали сложносоставную переменную Array (Массив). Когда мы проверяли тип этой переменной используя typeof то название ему было object. Однако это не тот Object (Объект), который собираемся рассматривать мы. Для понимания можно сказать что Array (Массив) - это форма представления данных, а object это тип этой формы представления. Так же и Object (Объект) - это тоже форма представления данных с таким же типом, как и у Массива - object. Вот такая ситуация: и форма представления называется Object и тип этой формы называется object.

Итак, что из себя представляeт Object (Объект)? Если прибегать к нашим ассоциациям, то объект я бы сравнил с таблицей. Обычной таблицей, соcтоящей из двух столбцов:

Эта таблица - схематичное представление сущности объекта. У нас есть сам объект. Он размещает в себе некую "табличную" структуру, состоящую из двух основных параметров: ключ и значение (если взять наше изображение, то "NAME" - это ключ, а его значение - "PABLITO", "DATE" - это ключ со значением "12.03.15" и так далее). Так как именно по ключу мы получаем его значение, желательно чтобы этот ключ был уникальным, то есть чтобы такое название ключа в отдельно взятом объекте существовало в единичном виде и не повторялось. Давайте попробуем придать схеме с рисунка кодовое представление. Вот как она будет выглядеть:

var object = {
    NAME: 'PABLITO',
    DATE: '12.03.15',
    AGE: 13,
    IS_STUDENT: false
}

Итак, по порядку. Мы создали переменную с именем object и присвоили ей конструкцию, заключенную в фигурные скобочки (подчёркнуты красной линией). Далее в виде ключ : значение мы указали нужные нам данные (в нашем случае мы взяли эти данные из схемы). Ключи данного объекта подчеркнуты оранжевой линией, а значения зеленой. Обратите внимание, что каждая такая пара (ключ и значение) разделены между собой запятой, которая отсутствует только у последней пары. Так же обратите внимание на то, все ключи написаны в верхнем регистре. Это делать необязательно. Я сделал так исключительно для того чтобы более четко продемонстрировать взаимосвязь кодового представления объекта с его схемой. Другими словами, объект вида...

var object = {
    name: 'PABLITO',
    date: '12.03.15',
    age: 13,
    is_student: false
}

...более предпочтителен. Теперь посмотрите на названия ключей. Все они уникальны и все они состоят из одного слова, кроме is_student. В этом названии у нас используется два слова, и мы разделили их нижним подчёркиванием. Мы сделали так потому, что пробелы в названии ключей объекта не допускаются, и, если вам требуется создать ключ с названием, состоящим из более чем одного слова, используйте либо нижнее подчеркивание как в нашем примере либо способ называемый "сamelCase". Это способ, при котором все слова участвующие в названии пишутся слитно, но каждое новое слово начинается с заглавной буквы. Например, наше название is_student в camelCas'e имело бы вид isStudent. Кроме пробелов в названии ключей запрещено использовать любые другие специфические символы. То есть точка, запятая, двоеточие, дефис, слеш и все что осталось (кроме нижнего подчеркивания) использовать запрещено. В остальном (буквы и целые цифры) всё разрешается.

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

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

Теперь давайте посмотрим, как же нам доставать требующуюся информацию из объекта. Как получать к ней доступ? На самом деле, как минимум один раз вы уже доставали данные из объекта. Давайте снова вспомним урок про массивы и свойство массива length. Помните, как мы добирались до значения, которое хранилось в этом свойстве. Это выглядело примерно так:

var array = [2, true, 'привет, голос'];

alert(array.length);

Обращение к свойству length (подчеркнуто зеленой линией) происходило через точку. Сначала мы указывали название массива, затем ставили точку, а затем указывали имя свойства.

Возвращаясь к нашему Объекту object обращение к его ключам будет происходит. по аналогичному алгоритму. Ключи объекта в значении которых лежит НЕ функция, также можно называть свойствами или атрибутами объекта. Давайте выведим свойства нашего объекта:

var object = {
    NAME: 'PABLITO',
    DATE: '12.03.15',
    AGE: 13,
    IS_STUDENT: false
};

alert(object.NAME);
alert(object.DATE);
alert(object.AGE);
alert(object.IS_STUDENT);

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

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

Вверху я написал:

.... Ключи объекта в значении которых лежит НЕ функция, также можно называть свойствами или атрибутами объекта...

А если в значении ключа будет лежать функция. Как тогда будет назваться такая пара? Пример:

var man = {
    NAME: 'PABLITO',
    walk: function() {
        return 'PABLITO ходит спиной вперёд'
    }
};

Обратите внимание, теперь у нас есть объект с именем man. В нашем объекте есть пара NAME: 'PABLITO' так как в значении у нас строка "PABLITO" мы, как и раньше можем смело называть ключ "NAME" свойством объекта man. А вот в ключе walk у нас расположилась функция. Ключ с таким значением называется методом объекта. Обращение к методу объекта происходит точно также, как и к его свойству. Давайте обратимся к нашему методу:

var man = {
    NAME: 'PABLITO',
    walk: function() {
        return 'PABLITO ходит спиной вперёд';
    }
};

alert(man.walk);

alert(man.walk());

Обратите внимание на оба наших обращения. В первом случае мы просто обращаемся к нашему методу walk. В этом обращении мы получим доступ к его значению, а его значение — это функция. Мы как бы проделали следующую мыслительную цепочку: "А что лежит в свойстве walk.?" "Ага! это функция! Значит walk - это метод, а не свойство, и так как это функция, то мы можем вызвать ее к исполнению!".

Именно вызов функции (подчеркнут красной линией), расположенной в методе walk объекта man мы и делаем в записи alert(man.walk());. При этом обратите внимание что функция метода walk использует оператор return это значит, что место ее вызова вернется значение, которое идет после этого оператора. В нашем случае это строка "PABLITO ходит спиной вперёд". Давайте проверим:

Как мы можем видеть первое сообщение действительно просто выдало нам значение (а это функция), которое лежит в метода walk, тогда как второе сообщение выдало результат исполнения этого самого метода.

Теперь давайте приведем пример объекта в свойствах которого лежат сложносоставные переменные, такие как Array (Массив) и Object (Объект).

var man = {
    professions: {
        first: 'изобретатель', 
        second: 'травник' 
    },
    friends: ['Дон Хуан', 'Дон Хенаро', 'Карлитос']
};

Смотрите, теперь в нашем объекте man расположились два свойства в значении которых лежат сложно составные переменные. В свойстве professions (профессии) лежит Объект, а в свойстве friends лежит Массив. Допустим, нам требуется получить название второй профессии в нашем объекте, а также имя третьего друга. Давайте рассмотрим на практике:

var man = {
    professions: {
        first: 'изобретатель', 
        second: 'травник' 
    },
    friends: ['Дон Хуан', 'Дон Хенаро', 'Карлитос']
};

// вторая профессия
alert(man.professions.second);

// третий друг
alert(man.friends[2]);

Обратите внимание на структуры расположенные на строчках №11 и №14. Оба обращения с нужным нам данными начинаются с части man. (подчеркнуто красной линией), что логично, ведь интересующая нас информация расположена внутри объекта man, а к свойствам объекта мы получаем доступ через точку (указывает красная стрелка). Далее мы указываем названия интересующих нас свойств (запрашиваем ключи, подчеркнуты оранжевой линией). И вот уже с этого момента у нас идет разделение.

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

Когда же мы обратились к свойству с именем friends (оранжевая линия), то мы увидели, что это массив. А из прошлых уроков мы знаем, что, для того чтобы получить доступ к элементу массива нам надо в квадратных скобках указать его порядковый номер. Мы хотели извлечь третьего друга, но опять же из прошлого урока мы помним, что нумерация элементов массива начинается с нуля. Таким образом третий элемент массива friends будет иметь порядковый номер "2". Вот его то мы и указываем в нашем вызове (подчеркнут зеленой линией). Проверим удастся ли нам получить эти данные:

Как видим, используя такой подход, мы легко получили название второй профессии и третьего друга из свойств объекта man.

А на сегодня все.

Ссылки на предыдущие уроки:

var lessons = {
Урок_1 : "Урок 1",
Урок_2 : "Урок 2",
Урок_3 : "Урок 3",
Урок_4 : "Урок 4",
Урок_5 : "Урок 5",
Урок_6 : "Урок 6",
Урок_7 : "Урок 7",
Урок_8 : "Урок 8",
Урок_9 : "Урок 9",
Урок_10 : "Урок 10",
Урок_11 : "Урок 11",
Урок_12 : "Урок 12",
Урок_13 : "Урок 13",
Урок_14 : "Урок 14",
Урок_15 : "Урок 15",
Урок_16 : "Урок 16",
Урок_17 : "Урок 17",
Урок_18 : "Урок 18",
Урок_19 : "Урок 19",
Урок_20 : "Урок 20",
Урок_21 : "Урок 21"
}