变量和函数提升

聊聊变量和函数的提升，按照自己的理解通俗的说出来。

• 变量的提升

    console.log(num); //输出undefined
    var num = 1;
    //等价于
    var num;
    console.log(num); //输出undefined
    num = 1;

变量提升好理解，javascript在执行代码的时候会首先把页面声明的全局变量提升到最前面，但是值没有提升，只是把申明放在了前面，所以输出了undefined

• 函数的提升

    test()
    function test(){
        console.log("test function");
    }
    //---------------------我是分割线--------------------------------------
    //等价于
    function test(){
        console.log("test function");
    }
    test()

申明了函数后无论在哪都能被调用，这是因为函数被整体提升到了前面去了，这与变量提升有些不同，变量只是申明被提升到了前面，而函数是整体被提升到了前面。

• 碰到的坑

    var test = function(){
        console.log("test");
    }
    function test(){
        console.log("test function");
    }
    test();//输出 test

    function test(){
        console.log("test function");
    }
    var test = function(){
        console.log("test");
    }
    test();//还是输出 test

WTF？两次都是输出test，我开始也是一脸萌比了。其实了解后才恍然大悟。

• 第一种情况提升后

    var test //我被提升了
    function test(){
        console.log("test function");  //我也被提升到这里来了哈哈
    }
    //---------------------上面是提升区-----------------------------------
        test = function(){
        console.log("test");
    }
    // function test(){
    //     console.log("test function");  //我被提升到上面去了
    // }
        test();//输出 test

只要申明了变量和定义函数开始都会被按照顺序提升到最前面，然后按照顺序执行代码，首先输出 test function 然后被test覆盖了，所以最后输出了test

• 第二种情况提升后

    function test(){
        console.log("test function");  //我被提升到上面去了
    }
    var test;
    //---------------------上面是提升区-----------------------------------
    // function test(){
    //     console.log("test function");  //我被提升到上面去了
    // }
    test = function(){     //我的申明被提升了
        console.log("test");
    }
    test();//还是输出 test

提升后按照顺序执行，发现test function还是被test覆盖了，最后还是输出了test

• 最后一种情况提升前

    test(); //输出test function
    function test(){
        console.log("test function");  
    }
    var test = function(){     
        console.log("test");
    }

• 提升后

    function test(){
        console.log("test function");  
    }
    var test;
    //---------------------上面是提升区-----------------------------------
    test(); //输出test function
    // function test(){
    //     console.log("test function");  //我被全部提升到上面去了
    // }
        test = function(){     
        console.log("test");
    }

这个第6行调用输出 test function 。为什么是这个结果呢？代码按照顺序执行，第四行虽然声明提上来了，但是没有值，第六行就已经输出来了，不存在覆盖的情况。直接输出了test function。