Web | JavaScript的提升机制

Posted 2021-01-28 愿己历尽千帆,归来仍是少年.

作用对象: 函数和变量的声明.

作用效果: 会将其声明提升到其所在的作用域的最顶端.函数会优先于变量的声明.

//函数的提升优于变量的提升
    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)//函数