【JavaScript】12 - JavaScript预解析

JavaScript预解析

需要思考以下问题：

1. 解析器运行JS分为哪两步？
2. 变量提升的步骤和运行过程是怎样的？
3. 函数提升的步骤和运行过程是怎样的？

1、预解析

思考：变量没有声明赋值直接打印（报错）

        console.log(num); //num is not defined

思考：变量先打印再声明赋值（undefined）

        console.log(num); //undefined
        var num = 10;

思考：函数先执行后命名函数（正常执行）

        fn();//666

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

思考：函数先执行后匿名函数

        fn(); //fn is not a function

        var fn = function() {
            console.log(666);
        }

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

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

1. 预解析；

把js里面所有的var还有function提升到当前作用域的最前面

预解析分为变量预解析（变量提升）和函数预解析（函数提升）：

• 变量提升：就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作；

        console.log(num); //undefined
        var num = 10;
		/*预解析*/
		var num;
		console.log(num); 
		num = 10;

• 函数提升：就是把所有的函数声明提升到当前作用域的最前面不调用函数。

        fn();//666

        function fn() {
            console.log(666);
        }
		/*预解析*/
        function fn() {
            console.log(666);
        }
		fn();

2. 代码执行。

3、预解析案例

案例1:结果是几?

        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();

案例2：结果是几?

        var num = 10;

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

该执行顺序等同于

        var num;

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

案例3：结果是几?

        var a = 18;
        f1();

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

该执行顺序等同于

        var a;

        function f1() {
            var b;
            var a
            b = 9;
            console.log(a); //undefined
            console.log(b); //9
            a = '123';
        }
        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 = 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 is not defined

---

END