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

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

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

Сегодня мы с Вами рассмотрим тему Функций подробнее. Прошлый урок можно назвать ознакомительным. Сегодня же мы будем рассматривать разнообразные нюансы выполнения функций и их поведения внутри кода.

Давайте начнем.

Урок 19. Функции. Часть II.

Для начала немного теории. Функции в JavaScript являются незаменимым инструментом. Поэтому углубить наши с Вами знания в этой теме является достаточно важной задачей.

Функции в JavaScript можно разделить на две группы:

1. Именованные функции (FunctionDeclaration).
2. Анонимные функции (FunctionExpression).

Именованные функции (FunctionDeclaration).

В прошлом уроке мы с Вами рассмотрели материал на примере Именованной функции. То есть функция имеющая собственное имя и называется именованной. В Нашем прошлом уроке это была функция message:

Обратите внимание на имя функции, которое идет сразу после ключевого слова function. Именно благодаря такой конструкции мы и относим её к группе именованных. Отличительной особенностью функции такого рода является их повсеместная доступность в коде. Что это значит? Помните, когда мы рассматривали переменные в третьем уроке, я обращал Ваше внимание на то, что сначала желательно создать переменную, присвоить ей значение, а уже после этого выполнять с ней какие-либо операции. Дело было в том, что если поступить иначе - сначала попытаться выполнить операцию с переменной, а только потом ее создать, то на момент выполнения операции с переменной, которая еще не объявлена, ее значение будет undefined. Так в случаем с Именованными функциями такой порядок абсолютно не важен. Давайте рассмотрим на примере:

// FUNCTIONS (ФУНКЦИИ)

// вызов функции перед ее созданием
message('сработала ПЕРЕД объявлением!');

function message (text) {
    alert(text);
}

// вызов функции перед ее созданием
message('сработала ПОСЛЕ объявлением!');

Обратите внимание на строку кода №4. В ней мы обращаемся к функции message еще до того, как фактически ее объявили (создали) на строке №7. То есть прослеживается небольшая алогичность последовательности (сначала используем, а потом только создали). А вот второй вызов этой функции мы сделали на строке №12 и такой порядок вполне себе логичный (сначала создали, а потом используем). И все-таки, если мы запустим данный скрипт в браузере, то увидим, что функция отработает для обоих вызовов, и не вызовет при этом никакой ошибки. Проверим:

Как видим, и сообщение ДО объявления самой функции, и сообщение ПОСЛЕ отработали как положено. JavaScript, как уже не раз было сказано, достаточно умен и одно из правил его работы заключается в том, что непосредственно перед началом исполнения кода, он соберет все Именованные функции, которые найдет и неявно для нас с Вами "поднимет" их вверх, в начало кода. То есть на момент первого вызова функции message на строке кода №4, сама функция уже будет неявно объявлена, а так как код в JavaScript'e исполняется сверху вниз слева направо, то поэтому и не происходит никакой ошибки. Такое поведение в JavaScript'e носит название Hoisting или по-русски Всплытие.

Другим словами можно вывести некое правило

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

Анонимные функции (FunctionExpression).

Анонимные функции в своем просто понимании - это функции без имени. То есть классическое кодовое представление Анонимной функции будет выглядеть следующим образом:

// FUNCTIONS (ФУНКЦИИ)
function (text) {
    alert(text);
}

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

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

// FUNCTIONS (ФУНКЦИИ)

var a = function (text) {
    alert(text);
}

a('я анонимная функция, присвоенная переменной "а"');

В этом примерена мы присваиваем анонимную функцию переменной a. И так как с этого момента в переменной а лежит функция, то и обращаться с ней мы можем как с функцией. Например, вызвать ее к исполнению на строке №7 и даже передать параметр. Проверим работоспособность:

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

// Такой код выдаст ОШИБКУ.
a('я анонимная функция, присвоенная переменной "а"');

var a = function (text) {
    alert(text);
}

Этот код работать не станет. Потому что мы попытались выполнить функцию раньше, чем определили переменную, которой эту функцию присвоили. Таким образом мы смело можем описать правило для работы с анонимными функциями при использовании метода присвоение

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

Следующий метод вызвать Анонимную функцию на исполнение называется самовызывающаяся функция. Уже из самого названия становится ясно, что самовызывающаяся функция - это функция которая сама себя вызывает на исполнение. В программировании на JavaScript'e бывают такие ситуации, когда после объявления(создания) анонимной функции нам сразу же требуется ее выполнить. В своем кодовом представлении пример самовызывающейся функции может выглядеть так:

// Самовызывающаяся функция
(function (text) {
    alert(text);
})('привет, я самовызывающаяся функция!');

Обратите внимание на саму конструкцию. В первых круглых скобках (обведенных зеленой рамкой) мы описали саму Анонимную функцию, а вторыми круглыми скобками (подчеркнуто красной линий) в сразу же вызываем ее к исполнению. Такой рода вызов отработает всего один раз. Давайте проверим работоспособность:

Как видим функция благополучно исполнилась. Ради справедливости можно добавить, что такой метод вызова будет актуальным и для Именованной функции. Но также, как и для Анонимной функции исполнение произойдет только 1 раз. Если после этого попробовать вызвать функцию по имени, мы получим ошибку. Пример:

// Самовызывающаяся функция

(function message (text) {
    alert(text);
})('привет, я самовызывающаяся функция!');

message('этот вызов исполнен уже не будет');

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

Как видим, первое сообщение вывелось как мы и предполагали, а второй вызов никакого сообщения уже на выдал, потому как на самом деле привел к ошибке.

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

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

(function () {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15, Урок 16, Урок 17, Урок 18 })();