[JAVASCRIPT] - Урок 4 - Вызов функции
В предыдущих уроках мы в основном говорили о глобальном контексте выполнения. Сегодня я хочу рассказать о вызове функций. А с заданием к этому уроку быстрее всех справился @kental. 🎉
Напомню, что выполнение скрипта в JavaScript выполяется в два этапа:
- этап создания, инициализации, когда весь код прочитывается, находятся все объявления функций и переменных
При этом функции создаются сразу работающими, а переменные со значением
undefined
. - этап выполнения - здесь уже переменным присваиваются их значения, добегая до той строчке, где это происходит.
Вызовом функции называется её запуск. В JavaScript для вызова функции используют скобки ()
:
a(); // вызываем функцию a
Сегодня в задании был дан код, подобный этому:
function b() {
var user;
console.log(user);
}
function a() {
var user = "qqc";
b();
console.log(user);
}
var user = "golos";
console.log(user);
a();
Догадались уже, что увидите в консоли? 😉
Давайте по порядку. У нас есть функция b
, в которой мы объявляем переменную user
и выводим её значение в консоль. Далее мы видим функцию a()
, где снова объявляем переменную user
и присваиваем ей значение "qqc"
, ВЫЗЫВАЕМ функцию b()
и выводим значение user
в консоль. Дальше мы снова видим объявление user
, но присваиваем ей уже другое значение - "golos"
. Снова выводим значение user
в консоль. И в конце мы видим строчку, где ВЫЗЫВАЕМ функцию a()
.
Так что же будет в консоли?
Давайте отследим по действиям, что будет происходить и чему будет равна на каждом этапе переменная user
.
Первым, как мы уже знаем, создается глобальный контекст выполнения. На этом этапе самая нижняя переменная user
резервирует себе местечко в памяти. user
принадлежит переменному окружению глобального контекста выполнения. Код выполняется и к переменной отправляется её значение golos
. Вызываем функцию a()
. Создается новый контекст выполнения для функции a
, где user
принадлежит переменному окружению этого контекста выполнения.
У каждого контекста выполнения своё переменное окружение.
Получается, теперь значение user
- qqc
. Вызываем функцию b()
. Создается еще один контекст выполнения, теперь для этой функции, со своим переменным окружением. Эта функция объявляет переменную user
, но ничего ей не присваивает, поэтому значение пока будет undefined
.
Каждая переменная user
, которую мы объявили была определена в своем контексте выполнения, в своей функции. И даже то, что это одна и та же переменная была объявлена трижды, ничего не значит: они отличаются друг от друга, уникальны и никак не соприкасаются друг с другом.
Давайте попробуем выполнить этот скрипт. Скопируем код в файл app.js
. Запускаем приложение и заглядываем в консоль.
Видим три строки:
golos
qqc
undefined
Вызов функции a
никаким образом не коснется переменной user
глобального контекста выполнения. Чтобы это проверить, добавим еще один вывод в консоль значения user
, но уже после вызова функции a()
:
function b() {...}
function a() {...}
var user = "golos";
console.log(user);
a();
console.log(user);
Когда мы запускаем приложение создается глобальный контекст выполнения, вызываем функцию a
- создается контекст выполнения функции a
, где вызываем функцию b
- создается контекст выполнения функции b
, в переменном окружении которого переменная user
= "undefined". Завершили выполнение функции b
, вернулись в контекст выполнения функции a
, где у нас есть собственное переменное окружение, и переменная user
равна qqc
. Все задачи внутри этой функции выполнили и вернулись обратно в глобальный контекст выполнения, где переменной user
соответствует значение golos
.
В консоли мы видим:
golos //вывод в консоль из глобального контекста выполнения
qqc //вывод в консоль из контекста выполнения функции a
undefined //вывод в консоль из контекста выполнения функции
golos //вывод в консоль из глобального контекста выполнения
Следующий урок будет последним в серии постов о контексте выполнения и областях видимости. Дальше начнётся самое интересное, поэтому обязательно подписывайтесь, чтобы не пропускать уроки. Ну и, конечно, задания с бонусами! 😉