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初始化为 valueundefined和一个 function test，添加到当前的词法环境中。如果此代码在全局上下文中运行，这些变量将作为属性添加到全局对象上。第 1 行：字符串'Is'被分配给a这个词法环境中的变量。第 12 行：[[Call]]在函数 上调用隐藏方法test，并创建一个新的执行上下文，其中包含一个变量a（初始值为undefined）和一个again添加到其词法环境中的函数。第 3 行：字符串'Fun'被分配给a这个词法环境中的变量。第 9 行：[[Call]]在函数 上调用隐藏方法again，并创建一个新的执行上下文，并在其词法环境中添加一个变量a（初始值为）。undefined第 5 行：字符串'JavaScript'被分配给a这个词法环境中的变量。第 6 行：调用主机提供的函数，传递与此词法环境window.alert中的变量关联的值( )。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)   }}将控制台日志：22

Answer 3

希望在控制台日志的帮助下，您将能够理解控制流程。按 Ctrl+Shift+I ，运行此答案末尾的代码片段。现在使用这些按钮浏览流控制。debuggervar 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)