1. 程式人生 > >Web | JavaScript的提升機制

Web | JavaScript的提升機制

作用物件: 函式和變數的宣告.

作用效果: 會將其宣告提升到其所在的作用域的最頂端.函式會優先於變數的宣告.

//函式的提升優於變數的提升
    test();
    var a=2;
    function test(){
        console.log(a);
    }
//瀏覽器會將其提升為===>
    function test(){
            console.log(a);
        }
        var a;
        test();
        a=2;

如果在同一個作用域內,有相同命名的變數和函式,那麼變數的宣告就會被忽略掉,只要函式的宣告有效.(但是變數的賦值行為依然有效)

//相同命名的變數和函式宣告
        foo(); 
        var foo;
        function foo() {
            console.log( 1 );
        }
//瀏覽器解析====>
        function foo() {
            console.log( 1 );
        }
        //var foo; 被忽略無效
        foo();

//2
    function a() {}
      var a;
    console.log(typeof a)//function

//3
    var c = 1
    function c(c) {
    console.log(c)
    var c = 3
    }
    c(2)   //結果是error

藉助一些小例項能夠更清晰的看到提升所帶來的效果

        var foo=2;
        test();
        function test(){
            foo=5;
            function foo(){
                console.log(1);
            }
        }
        console.log(foo);
//瀏覽器解析====>
        function test(){
            function foo(){
                console.log(1);
            }
            foo=5;
        }
        var foo;
        foo = 2;
        test();
        console.log(foo)  //==>2

需要注意的是,如果是在程式碼塊中宣告的函式,會自己轉化成函式表示式,那麼提升的就僅僅只是指向表示式的變數.

        //程式碼塊中無作用域
        console.log(a);//undefined
        console.log(b);//undefined
        if(true){
            var a=0;
        }else{
            var b=2;
        }
        //程式碼塊中的函式轉化,下面函式相當於註釋的樣子
        console.log(test)//undefined
        if(true){
            /*var test =function (){
                console.log("if");
            }*/
            function test (){
                console.log("if");
            }
        }else{
            /*var test =function (){
                console.log("eles");
            }*/
            function test (){
                console.log("else");
            }
        }
        console.log(test)//函式