记常见JS面试题的一次详细分析过程

2017-06-01

详细分析了一段源生JS代码的执行过程，很有帮助，还有一个特例案例，求指教

代码分析

-> 目的是分析清楚代码每一句话的执行过程与结果. 目的在于学会分析代码的执行原理以及分析面试题.
-> 分析步骤
1> js 代码在预解析的时候会做两件事情, 一个是语法, 另一个是记录声明( 不包括函数内的声明 )
2> 预解析完成后会从第一行代码开始依次执行 js 代码( 语句 )
3> 如果进入了函数, 会在函数进入, 执行之前, 对函数内再进行对应的预解析
4> 如果函数内预解析结束, 再从函数开始的位置一步一步的执行代码.

注意: 就是每一个变量和每一个数据的变化.

1

//输出是什么？  
<script>
    var num = 123;
    function func1() {
      num = 456;
      function func2() {
        var num = 789;
        function func3() {
          console.log( num );
          var num = 'abc';
        }
        func3();
        console.log( num );
      }
      func2();
      console.log( num );
    }
    func1();
    
  </script>

尝试详细分析程序运行过程:
//1，预解析，代码从上往下，发现有两个声明，一个是var num,一个是函数func1
//预解析的时候，记录下func1与函数体相连
//预解析的时候，记录下名字num，但是没有值，所以值为undefined

// 预解析结束，开始执行代码，执行的第一句话是num=123；

//由于预解析处理函数声明, 因此函数的定义部分不参与代码的执行

//2执行第二句话，调用func1.
//开辟函数func1需要的内存空间, 传入数据(此处由于没有传参所以直接执行函数体)

// 进入函数体func1内，开始函数体func1内的预解析
//发现有函数声明func2.记录下func2与函数体相连

// 函数体func1的预解析结束，开始执行函数体func1
//第一句，赋值，将456 放到 num 中, 覆盖原有 123.

//3 第二句，调用func2

//开辟函数func2需要的内存空间, 传入数据(此处由于没有传参所以直接执行函数体)
//进入函数体func2内，开始函数体func2的预解析
//发现有函数声明func3和变量声明var num,记录下func3与函数体相连
//函数体func2的预解析结束，开始执行函数体func2
//第一句，赋值，给func2中新声明的局部变量num赋值789

//4 第二句，调用func3

//开辟函数func2需要的内存空间, 传入数据(此处由于没有传参所以直接执行函数体)
//进入函数体func3内，开始函数体func3的预解析
//发现有变量声明 var num
//函数体func3的预解析结束，开始执行函数体func3
//第一句，打印num，因为func3中有局部变量 num 的声明，所以打印的num为该变量，而该变量未赋值，所以打印 undefined
//第二句，给func3中的局部变量赋值”abc”

//func3执行结束，退出函数体。继续执行func2

//func2第三句，打印num，因为func2中有局部变量num的声明，且赋值为789，所以打印该变量，输出为789

//func2执行结束，退出函数体，继续执行func1

//func1第三句，打印num，因为func1中没有局部变量num的声明，所以向上一级查找var num
//发现此时全局变量 num=456 (func1第一句给全局变量完成了赋值)，所以打印全局变量num,输出为456

//至此，程序完全运行结束，控制台输出为：
//undefined
//789
//456

总结:
通过详细分析程序的运行过程，可以充分理解源生JS程序的运行过程，锻炼自己的思考和编写能力，是个很好的学习方法，大家都可以试一试！:)

2

// 特例
          if ( true ) {
            function foo() {
              console.log( true );
            }
          } else {
            function foo() {
              console.log( false );
            }
          }
        foo()
          
          根据我们队函数的理解, 只要函数不在代码结构中, 那么函数就应该是声明, 而非表达式.
          所以这个函数调用应该输出false  
          
          但是, 我们发现在火狐浏览器, 以及今天的谷歌浏览器中, 我们的预解析似乎会根据 if 中的判断进行预解析.然后输出true！
          
          只能认为在预解析的过程中, if 起作用了.