变量提升

在JavaScript中，变量提升是很常见的现象，在实际开发中如果对其不够了解，就容易出现问题而找不到错在哪里。今天，我就来详细讲一讲变量提升。

什么是变量提升

先来看一个例子：

function foo(){
        console.log(a)
        var a = 1
}
foo()

这段代码并不会报错，而是输出undefined，原因就在于变量提升(Hoisting)。变量提升会将当前作用域内的所有声明提升到当前作用域的顶部，所以以上这段代码相当于以下代码：

function foo(){
        var a
        console.log(a)
        a = 1
}
foo()

这样看起来输出undefined就能解释了。

函数提升

和变量提升一样的还有函数提升，同样来看一个例子：

foo()
function foo(){
        console.log('test')
}

这段代码也不会报错，因为函数声明会被提升到当前作用域的顶部。注意，当有多个同名的函数声明时，后面的函数声明会覆盖前面的函数声明。以下这段代码会输出b：

foo()
function foo(){
        console.log('a')
}
function foo(){
        console.log('b')
}

还有一点需要注意，函数可以用表达式来定义，此时发生的是变量提升，而非函数提升。来看以下代码：

foo()
var foo = function(){
        console.log('a')
}

此时会报TypeError错误，因为当前提升的变量foo为undefined,不是函数，所以不能运行。

当函数提升和变量提升同时存在时，函数优先

foo()
var foo = 1
function foo(){
      console.log('a')
}