js中的预解析小案例

<script>
        
        //什么是javascripr中的预解析：
        //一：预解析会把变量声明提前
        //二：预解析在调用函数的时候，会把函数声明提前
        

        //案例一：
        
        f1();
        function f1(){
            console.log(num);//输出结果是undefined
            var num = 10;
        }
        //案列一解析，
        //
        //声明函数提前，声明变量提前
        //因为num声明了没有赋值，所以输出结果是undefined
        //
        //function f1(){
        //    var num
        //    console.log(num);//输出结果是undefined
        //    num = 10;
        //}
        //f1();
        //
        //
        //案例二：

        f2();
        var num2 = 30;
        function f2(){
            console.log(num2);//undefined
            var num2 = 40; 
        }

        //案列二解析
        //变量提前
        //因为函数变量提前了，var num2 = 30；跑到了后面去，
        //f2函数中的num2变量也提升了，所以还是没有num2还是没有被赋值，所以是undefined.
        //
        function f2(){
            var num2;
            console.log(num2);//undefined
            num2 = 40;
        }
        f2();
        var num2 = 30;
        

        //案例三
        //
        //

        f2();
        var num2 = 30;
        function f2(){
            console.log(num2);//undefined
        }

        //案例三解析：一样的道理，变量提升，num2声明没有赋值，依旧是undefined.
        var num2;
        function f2(){
            console.log(num2);
        }
        f2();
        num2 = 30;

        //案例四：
        //
        //
        
        console.log(a);
        function a(){
            console.log("abcdef");
        }
        var a =1;
        console.log();

        //案例四解析
        //

        var a;
        function a(){
            console.log("abcdef");
        }
        console.log(a);//函数里面的代码
        //实际上这里输出的是函数，而不是变量a
        a=1;
        console.log(a);//1

        //当函数名与变量名相同的时候，输出的是函数名，函数名里面存储的是函数里面的代码
        //
        
        //案例五
        //

        var a =18;
        f3();
        function f3(){
            var b = 18;
            console.log(a);
            console.log(b);
            var a = 'abc';//这里有两个小坑，函数f3和a都要提升！
        }

        //案例五解析
        //

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

        //案例六
        //

        f4();
        console.log(a);
        console.log(b);
        console.log(c);
        function f4(){
            var a = b = c =9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        
        //案例六解析
        //

        function f4(){
            var a;
            a = b = c =9;
            //这段代码可以写成下面这种形式
            //a=9;
            //b=9;
            //c=9;
            console.log(a);//9
            console.log(b);//9
            console.log(c);//9
        }
        f4();
        console.log(c);//9
        console.log(b);//9
        console.log(a);//undefined
        
        //在js中没有var创建的变量是隐式全局变量
        //在函数作用域内有var创建的变量是局部变量，在函数外部是无法被访问到的
        //
        //

        //案例七
        //
        
        f5();
        var f5 = function (){
            console.log(a);
            var a =10;
        }

        //案例七解析

        var f5;//
        f5();
        f5 = function (){
            var a;
            console.log(a);//报错
            a = 10;
        }

        //变量提升，var f5提前，在这里f5是一个变量，而不是一个函数
        //不能进行调用。
        //如果换成下面正常函数的话是没有问题的
        //

        f5();
        function f5(){
            console.log("我今天又变帅了！");
        }
    </script>