js作用域链和预编译

js引擎运行分为两步，预解析 代码执行

（1）预解析： js引擎会拿js里面所有的var还有 function 提升到当前作用域的最前面
（2）代码执行：按照代码书写的顺序从上往下执行

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
变量提升就是把所有的变量声明提升到作用域的最前面，不提升赋值操做
函数提升：就是把所有函数提升到作用域的最前面，不调用函数

作用域链：内部函数访问外部函数的变量时，采取的是链式查找的方式来决定取哪个值，一层（大括号）一层往外找

下面有几个小题目，大家先尝试着思考并且得出答案，有疑问的话可以看问题后面注释部分的解析。每次在浏览器控制台测试一个题目时，记得注释其他题目哦，否则会相互影响。

解题思路：先预解析，再根据作用域链查找

1 <script>

         //问题1 变量预解析（变量提升）第一种情况
         console.log(num1);
         var num1 = 10;
         //结果undefined

         /*  相当于执行了以下代码
         var num1;
         console.log(num1);
         num1 = 10; */

         // 问题2  变量预解析（变量提升）第二种情况
         fun1();
         var fun1 = function() {
             console.log("这里测试变量预解析");
         }
             /* 相当于执行了以下代码
             var fun1;
             fun1();
             fun1 = function() {
                 console.log("这里测试变量预解析");
             } */

         // 问题3
         fun2();

         function fun2() {
             console.log("函数预解析");
         }

         /* 相当于执行了以下代码
         function fun2() {
             console.log("函数预解析");
         }
         fun2(); */

         //   预解析案例1
         var num = 10;
         fun3();

         function fun3() {
             console.log("fun3" + num);
             var num = 20;
         }

         /* 相当于执行了以下代码
         var num;

         function fun3() {
             var num;
             console.log(num); //先变量提升，然后根据作用域链查找
             num = 20;

         }
         num = 10;
         fun3(); */

         // 案例2
         var num4 = 10;

         function fun4() {
             console.log("fun4" + num4);
             var num4 = 20;
             console.log("fun4" + num4);
         }
         fun4();

         /* 相当于执行了以下代码
         var num4;

         function fun4() {
             var num4;
             console.log(num4);
             num4 = 20;
             console.log(num4);
         }
         num4 = 10;
         fun4(); */

         // 案例3
         var a = 18;
         fun5();

         function fun5() {
             var b = 9;
             console.log(a);
             console.log(b);
             var a = '123';
         }

         /* 相当于执行了以下代码
         var a;
         function fun5() {
             var b;
             var a;
             b = 9;
             console.log(a);
             console.log(b);
             a = '123';
         }
         a = 18;
         fun5(); */

         // 案例4
         fun6();
         console.log("fun6 " + p);
         console.log("fun6 " + n);
         console.log("fun6 " + m);

         function fun6() {
             var a = b = c = 9;
             console.log("fun6 " + m);
             console.log("fun6 " + n);
             console.log("fun6 " + p);
         }

         /*
                 相当于执行了以下代码

                 function fun6() {
                     // 注： var m = n = p = 9;   相当于    var m = 9; n = 9; p = 9;    所以n p 直接赋值，是全局变量

                     // 而 var m = 9, n = 9, p = 9; 相当于 var m = 9; var n = 9; var p = 9;
                     var m;
                     m = 9;
                     n = 9;
                     p = 9;

                     console.log(m);
                     console.log(n);
                     console.log(p);
                 }
                 fun6();
                 console.log(p);
                 console.log(n);
                 console.log(m); */
     </script>