浅谈JavaScript预解析

一、JavaScript代码在浏览器中如何运行？

浏览器中的js解释器运行js代码分为两步

1.预解析：js解释器会把js代码中的 var 和 function 提升到当前作用域的最前面。

• 变量预解析：把所有的变量声明提升到当前作用域最前面，不提升赋值操作。
• 函数预解析：把所有的函数声明提升到当前作用域最前面，不调用函数。

2.执行代码：按照代码的书写顺序从上往下执行。

二、代码演示

// 1.
        // console.log(num);   // 报错，因为变量num 没有声明，无中生有

        // 2.Why?
        // 解释：根据变量预解析：将变量的声明提升到当前作用域的最前面，不提升赋值操作
        /*
            var num1;
            console.log(num1);
            num1 = 10;
        */
        console.log(num1);      // undefined
        var num1 = 10;

        // 3.Why?
        // 根据函数预解析：把所有的函数声明提升到当前作用域最前面，不调用函数
        /*  
            function fun(){
                console.log(20);    // 20
            }
            然后调用函数：
            fun();
        */
        fun();
        function fun(){
     
            console.log(20);    // 20
        }

        // 4.Why?
        // 根据变量预解析：把所有的变量声明提升到当前作用域最前面，不提升赋值操作
        /*
            var fu;
            fu();
            fu = function(){
                console.log(22);
            }
        */
        fu();   //fu没有定义
        var fu = function (){
     
            console.log(22);
        }

三、预解析练习

 		var num = 10;
        fun();
        function fun() {
     
            console.log(num);
            var num = 20;
        }
		// 上述代码相当于：
        // var num;
        // function fun() {
     
        //     var num;
        //     console.log(num);   // undefined
        //     num = 20;
        // }
        // num = 10;
        // fun();

		var num = 10;
        function fn() {
     
            console.log(num);// undefined
            var num = 20;
            console.log(num);// 20
        }
        fn();

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

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

        // 上述代码相当于：
        // var a;
        // function f1() {
     
        //     var b;
        //     var a;
        //     b = 9;
        //     console.log(a);
        //     console.log(b);
        //     a = '123';
        // }
        // a = 18;
        // f1();

        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 = b = c = 9;
            // var a;
            // a = 9; b = 9; 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);// 没有定义变量a