咳咳

作为一名JSer，说到“变量提升”，我们都很熟悉。曾经我也以为是这样，直到今天去百度面试，在这个问题上狠狠的栽了个跟头。

关于JSer都很熟悉的简单例子

• 变量提升

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

这是一个很简单的例子，大家应该很快能反应过来，输出的是undefined。

• 函数提升

foo()
function foo () {
    console.log('hello world')
}

这是也一个很简单的例子，大家应该很快能反应过来，foo函数是可以完美执行的。

今天令我栽跟头的题目

// ... 假装这里有很多不相关代码
var a = function () {
    console.log(1)
}
function a() {
    console.log(2)
}
a()

输出啥？
如果对上面那两个例子非常熟悉，其实这一题应该是能给出答案的。
函数表达式的例子，我们可以改写为：

var a  // 声明变量的操作被提升到最前面
// ... 假装这里有很多不相关代码
a = function {
    console.log(1)
}
a()

如上，a变量的声明被提前到了作用域的最前面，执行到对应处，再给a赋值。
举一反三的话？函数声明的例子怎么改呢？
举一反三的话，就一定错了。因为举着一个西瓜，是反不出一个苹果的。

function foo () {
    console.log('hello world')
}
// ... 假装这里有很多不相关代码
foo()

对于函数声明的提升，提升不仅仅是函数声明，而是这个函数的所有。我们总是把变量提升挂在嘴边，误以为变量声明提升（函数表达式本质也是一个变量声明）和函数声明提升是一回事，却忽视了重要的整体提升概念。
所以综合以上，可以把这道的面试题改下如下：

var a
function a() {
    console.log(2)
}
// ... 假装这里有很多不相关代码
a = function () {
    console.log(1)
}

a()

改写成这样的话，我想应该没有人会不知道输出什么吧？
很可惜，机会是留给有准备的人，我错过了一次好机会

原文首发于我的博客：https://www.vq0599.com/p/34
转载请注明出处