В предыдущих уроках мы в основном говорили о глобальном контексте выполнения. Сегодня я хочу рассказать о вызове функций. А с заданием к этому уроку быстрее всех справился @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 //вывод в консоль из глобального контекста выполнения
Следующий урок будет последним в серии постов о контексте выполнения и областях видимости. Дальше начнётся самое интересное, поэтому обязательно подписывайтесь, чтобы не пропускать уроки. Ну и, конечно, задания с бонусами! 😉
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧