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>