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

在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