美文网首页
详解js中的变量提升与方法提升

详解js中的变量提升与方法提升

作者: 骑毛驴的小强 | 来源:发表于2020-01-14 14:39 被阅读0次

    在web中全局变量和全局方法都是window对象的一个属性。

    变量提升

    js中对var定义的变量有提升的效果,比如下面代码

        var a = "abcd";
    

    在js中是这样存在的

        var a;
        a = "abcd";
    

    对于方法中的var也是一样,不过仅限于方法内的作用域

        function test() {
            console.log(a)
            var a = "abcd";
            console.log(a)
        };
        test();
        //就被js解析成
        function test() {
            var a;
            console.log(a) // undefined
            a = "abcd";
            console.log(a) // abcd
        };
        test();
    

    若方法内定义的var变量与全局定义var变量重名了,此时适用就近原则(局部优先),比如

        var a = "abcd";
        function test() {
            console.log(a); //undefined
            var a = "dcba";
            console.log(a);// dcba
        };
        test();
    

    js定义变量有var let(这里不做讨论)和 不写变量声明,比如:

        var a = "abcd";
        b = "xyz";
    

    都可以成为一个变量,这2种方式还是有区别的,var定义的是函数作用域,没有限定符修饰的,是绑定在window上的,是全局作用域,var定义的变量是有提升作用的,而没有限定符修饰的是没有变量提升的(因为此时是直接赋值了,也就没有变量提升了)。比如

        function test() {
            console.log(a); //报错,a is not defined
            a = "abcd";
            console.log(a)
        };
        test();
    

    不带限定符修饰的是全局变量,比如

        function test() {
            a = "abcd";
            console.log(a); //abcd
        };
        test();
        console.log(window.a); // abcd
    
        function test() {
            var a = "abcd";
            console.log(a);//abcd
        };
        test();
        console.log(window.a); //undefined
    

    方法提升

    方法提升就比较有意思了,在js中优先级,方法>变量>自上到下。比如:

        console.log(a);    // f a() {return 10;}
        console.log(a());    //  10
        var a = 3;
        console.log(a)   //3
        function a() {
            return 10;
        }
    

    下面这2个方法看起来没啥区别,实质在提升这方面还是有区别的。

        a();
        var a = function () {
            console.log("abcd");
        };
    

    此时运行会报错,a is not a function,此时a并不是方法,而是一个变量,按照变量提升而不是方法方法提升

        //~~~~~~~~~~~~~~~~~~~
        a();
        function a() {
            console.log("abcd");//abcd
        }
    

    提升机制

    • 变量提升
    //xx
    var getName = function() {
    }
    

    等价于

    var getName;
    //xx
    getName = function() {
    }
    
    • 方法提升(直接把定义函数的代码抽取到最前面)
    //xx
    function getName() {
    }
    

    等价于

    function getName() {
    }
    //xx
    

    相关文章

      网友评论

          本文标题:详解js中的变量提升与方法提升

          本文链接:https://www.haomeiwen.com/subject/enhcyftx.html