Javascript выполнение функций и вызовы вложенных функций

Question

Я изучаю javascript в течение нескольких месяцев, я посещаю один js тест. Я видел эти вопросы. Я не в состоянии понять ход выполнения этого очень простого кода. Было бы очень полезно, если бы кто-то объяснит мне ясно, спасибо заранее

var a = 'Is';
function test() {
    var a = 'Fun';
    function again() {
        var a = 'JavaScript';
        alert(a);

    }
    again();
    alert(a);
}
test();
alert(a);

Вывод

Javascript 
Fun 
Is

Answer 1

1: var a = 'Is';
2: function test() {
3:     var a = 'Fun';
4:     function again() {
5:         var a = 'JavaScript';
6:         alert(a);
7: 
8:     }
9:     again();
10:    alert(a);
11: }
12: test();
13: alert(a);

Перед выполнением строки 1: Переменная a, инициализированная значением undefined, и функция test, добавляются в текущую лексическую среду. Если этот код выполняется в глобальном контексте, эти переменные будут добавлены в качестве свойств глобального объекта.

Строка 1: Строка 'Is' назначена переменной a в этой лексической среде.

Строка 12: Скрытый метод [[Call]] вызывается для функции test, и создается новый контекст выполнения с переменной a ( с начальным значением undefined) и функцией again, добавленной в его лексическое окружение.

Строка 3: Строка 'Fun' назначена переменной a в это лексическое окружение.

Строка 9: Скрытый метод [[Call]] вызывается для функции again, и создается новый контекст выполнения с переменной a (с начальное значение undefined), добавленное к его лексической среде.

Строка 5: Строка 'JavaScript' присваивается переменной a в этой лексической среде.

Строка 6: Вызывается предоставляемая хостом функция window.alert, pa ssing значение, связанное с переменной a в этой лексической среде ('JavaScript').

Строка 10: Вызывается предоставленная хостом функция window.alert, передавая значение, связанное с переменная a в этой лексической среде ('Fun').

Строка 13: Вызывается предоставленная хостом функция window.alert, передавая значение, связанное с переменной a, в это лексическая среда ('Is').

Answer 2

Все дело в области видимости и замыкания переменных. Сначала вызывается test, поэтому скрипт запускает его. Внутри функции test создается и вызывается новая функция again.

Каждая дочерняя функция имеет доступ к переменным родительских функций (замыкание), но если у самой дочерней функции есть переменная, то она перезаписывает родительскую переменную. (var a), чем дочерняя функция использует свою собственную переменную (или переменную, которая находится в ближайшем замыкании).

Например:

const a = 1;
function first(){
   const a = 2
   console.log(a)
   function(){
     console.log(a)
   }
}

будет поддерживать журнал:

2
2

Еще немного приятной информации здесь: Каков диапазон переменных в JavaScript?

Answer 3

Надеюсь, что с помощью журналов консоли вы сможете понять поток управления.

Нажмите Ctrl + Shift + I, запустите фрагмент кода в конце этого ответа.

Теперь для навигации по управлению потоком используйте эти кнопки.

debugger
var a = 'Fun';
function test() {
    console.log("Im in test");
    var a = 'Is';
    function again() {
       console.log("Im in again");
        var a = 'JavaScript';
        alert(a);
  
    }
    again();
    console.log("Iam here after calling again");
    alert(a);
}
test();
console.log("Im here after calling test");
alert(a)

Answer 4

Для начала обратитесь к следующей ссылке в методе alert () https://www.w3schools.com/jsref/met_win_alert.asp. Кроме того, узнайте больше о области видимости переменных в Javascript по следующей ссылке https://www.w3schools.com/js/js_scope.asp.

По вашему вопросу поток выполнения выглядит следующим образом:

1. Глобальная переменная 'a' была инициализирована или присвоена 'Is'
2. Мы создаем тест пользовательской функции
3. Внутри нашей пользовательской функции test () мы создаем локальную функцию переменная 'a' и присвоение ей 'Fun'
4. Мы снова создаем локальную функцию внутри тестовой функции
5. Внутри функции again мы создаем локальную переменную 'a' и присваиваем ее значение на 'Javascript', а затем отобразите окно оповещения со значением 'a'
6. За пределами функции again (), но внутри области действия test (), мы снова вызываем функцию, а затем оповещаем () значение of 'a', которая является переменной 'a' внутри test () и вне again ().
7. Наконец, вне функции test () мы вызываем test (), которая затем снова вызывает Invoke внутри нее. Затем мы сообщаем значение 'a'.
8. Каждый раз, когда мы вызываем функцию test (), мы запускаем вызов again () и оповещаем внутри него.

Следовательно , вывод выше. Я надеюсь, что описание будет работать.