js引擎运行中的预解析（变量提升和函数提升）及相关实操案例

js引擎运行js分为两步：预解析    代码执行
            (1) 预解析js引擎会把js里面所有的var ，还有function提升到当前作用域的最前面
            (2) 代码执行 按照代码书写的顺序从上往下执行
        预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）
            (1) 变量提升 就是把所有的变量声明提升到当前作用域最前面，不提升赋值操作
            实例1：console.log(sum); //undefined           var sum;
                                       ===> 转换为                            console.log(sum);
                         var sum = 10;                                       sum = 10;
                  
            实例2：fun(); // 报错                                           var fun;
                         var fun = function() {                            fun();
                             console.log(22);    ===> 转换为       fun = function() {
                          }                                                                  console.log(22);
                                                                                        }
            (2) 函数提升 就是把所有的函数声明提升到当前作用域最前面，不调用函数
            实例： fn(); // 11                                             function fn() {
                       function fn() {                                          console.log(11);
                            console.log(11);  ===> 转换为      }
                       }                                                           fn();  // 11

预解析案例：

案例1 结果是？undefined
      var num = 10;
      fun();
      function fun() {
         console.log(num);
         var num = 20;
      }

<script>
      // 上面案例预解析为下面的代码
      var num;
      function fun() {
         var num;
         console.log(num);
         num = 20;
      }
      num = 10;
      fun();  // undefined
</script>

案例2 结果是？
             var num = 10;
             function fn() {
                 console.log(num);
                 var num = 20;
                 console.log(num);
             }
             fn();

<script>
    // 上面案例预解析为下面的代码
	var num;
    function fn() {
	    var num;
		console.log(num); // undefined
		num = 20;
		console.log(num); // 20
	}
	num = 10;
	fn();
</script>

 案例3 结果是？
             var a = 18;
             f1();
             function f1() {
                 var b = 9;
                 console.log(a); // undefined
                 console.log(b); // 9
                 var a = '123';
             }

<script>
    // 上面案例预解析为下面的代码
	var a;
    function f1() {
		var b;
		var a;
		b = 9;
		console.log(a); // undefined
		console.log(b); // 9
	    a = '123';
	}
    a = 18;
	f1();
</script>

 案例4 结果是？
            f1();
            console.log(c); // 9
            console.log(b); // 9
            console.log(a); // 报错
            function f1() {
                var a = b = c = 9;
                console.log(a); // 9
                console.log(b); // 9
                console.log(c); // 9
            }

<script>
    // 上面案例预解析为下面的代码
	function f1() {
		var a;
		a = b = c = 9;
	// 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值，没有var 声明当全局变量看
		console.log(a); // 9
	    console.log(b); // 9
		console.log(c); // 9
	}
	f1();
	console.log(c); // 9
	console.log(b); // 9
	console.log(a); // 报错
</script>