JavaScript难点——变量提升和函数提升（一）

前端菜鸟的成长之路

---

闲话少说，直接上一段代码先

var f = function() {
    console.log('1');
};

function f() {
    console.log('2');
};

f();

会输出几呢？答案是’1’；

这里就到今天要学的知识点了变量提升。（变量提升是JavaScript解释器的一个隐式操作）

变量声明和函数声明总是被JavaScript解释器隐式地提升到包含他们的作用域的最顶端，看下面的代码。

function foo() {
    bar(); 
    var x = 1;
}

实际上被解释为

function foo() {
    var x;
    bar(); 
    x = 1;
}

变量声明提升其实只提升了变量声明中的名称部分，赋值部分并没有被提升。

函数声明提升则整个函数体也都会被提升。如下：

test();
function test() {
    foo();
    function foo() { 
        console.log("Amazing!");
    }
}

但声明一个函数还有一种方式：如下

test();
function test() {
    bar();
    var bar= function() { //函数表达式被赋值给变量'bar' 
        console.log("Amazing!");
    }
}

运行之后发现报错了’ bar is not a function’。

得出结论：只有函数声明的方式会连函数体一起提升，而函数表达式中只会提升名称，函数体只有在执行到赋值语句时才会被赋值。

到这里再回头看一下开始的那段代码，其实它会被解析为

function f() { //函数声明提升
    console.log('2');
};

var f; //变量声明提升

f = function() { //变量赋值依然保留在原来的位置
    console.log('1');
};

f(); // 最终输出：1