JavaScript（八）-- 预解析

目录

1. 预解析

2. 变量预解析 和 函数预解析

3. 预解析案例

        3.1 案例1：结果是几

        3.2 案例2：结果是几

         3.3 案例3：结果是几

         3.4 案例4：结果是几

---

1. 预解析

        JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析 和 代码执行。

2. 变量预解析 和 函数预解析

    <script>
        // 1问
        // console.log(num);   //num is not defined
        
        // 2问
        console.log(num);   // undefined   坑1
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;

        // 3问
        fn();   // 11
        function fn() {
            console.log(11);
        }
        // fn();  // 11

        // 4问
        fun();  // fun is not a function   报错   坑2
        var fun = function() {
            console.log(22);
        }
        // fun();  // 22
        // 函数表达式  调用必须写在函数表达式的下面
        // 相当于执行了以下代码
        // var fun;
        // fun();
        // fun = function() {
        //     console.log(22);
        // }

        // 1. 我们JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析 和 代码执行。
        // (1) 预解析:  js 引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面
        // (2) 代码执行:  按照代码书写的顺序从上往下执行
        // 2. 预解析分为  变量预解析（变量提升） 和  函数预解析（函数提升）
        // (1) 变量提升  就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升  就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    </script>

3. 预解析案例

        3.1 案例1：结果是几

                

    <script>
        // 预解析案例
        // 案例1
        var num = 10;
        fun();  // undefined
        function fun() {
            console.log(num);
            var num = 20;
        }
        // 相当于执行了以下操作
        var num;
        function fun() {
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();
    </script>

        3.2 案例2：结果是几

                

    <script>
        // 案例2
        var num = 10;
        function fn() {
            console.log(num);   // undefind
            var num = 20;
            console.log(num);   // 20
        }
        fn();

        // 相当于执行了以下代码
        var num;
        function fn() {
            var num;
            console.log(num);   // undefind
            num = 20;
            console.log(num);   // 20
        }
        num = 10;
        fn();
    </script>

         3.3 案例3：结果是几

                

    <script>
        // 案例3
        var a = 18;
        f1();
        function f1() {
            var b = 9;
            console.log(a);     // undefind
            console.log(b);     // 9
            var a = '123';
        }
        // 相当于执行了以下代码
        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);     // undefind
            console.log(b);     // 9
            a = '123';
        }
        a = 18;
        f1();
    </script>

         3.4 案例4：结果是几

                

    <script>
        // 案例4
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            // 相当于 var a = 9; b = 9; c = 9;  b 和 c 直接赋值  没有 var 声明  当  全局变量看
            // 集体声明  var a = 9, b = 9, c = 9;
            console.log(a);
            console.log(a);
            console.log(c);
        }
        // 相当于执行了以下代码
        function f1() {
            var a;
            a = b =c = 9;
            console.log(a);     // 9
            console.log(a);     // 9
            console.log(c);     // 9
        }
        f1();
        console.log(c);     // 9
        console.log(b);     // 9
        console.log(a);     // a is not defined
    </script>