js预解析

js预解析

1.预解析

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

// 1问
        // console.log(num);

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


// 3问  （函数提升）
        fn();

        function fn() {
            console.log(11);
        }

// 4问
        fun(); //报错 坑2
        var fun = function() {
                console.log(22);

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


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

 预解析案例

// 案例1  undefined
        var num = 10;
        fun();

        function fun() {
            console.log(num);
            var num = 20;
        }
        // 相当于执行了以下操作
        // var num;
        // function fun() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        // }
        // num = 10;
        // fun();

// 案例2   undefined，20
        var num = 10;

        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();
        // 相当于以下代码
        // var num;
        // function fn() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        //     console.log(num);
        // }
        // num = 10;
        // fn();

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

        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = 'abc';
        }
        // 相当于执行以下代码
        var a;

        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a); //undefined
            console.log(b); //9
            a = 'abc';
        }
        a = 18;
        f1();

// 案例4
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 相当于以下代码
        function f1() {
            var a;
            a = b = c = 9;
            // 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); //9
            console.log(b); //9
            console.log(c); //9
        }
        f1();
        console.log(c); //9
        console.log(b); //9
        console.log(a); //报错