JS变量提升(Hoisting)

写了无数JS也依旧没听过变量提升…

变量提升(Hoisting)这个概念，我第一次见到是在万人膜拜的Airbnb JS 代码风格中见到。看完这一节大概明白是在说什么，然后觉得非常奇怪，这个概念平时写代码什么情况下用的到呢？

我写了这么久JS，从来也不会先用变量后定义的呀，而且别的语言好像根本没有这个概念，难怪我从来没有遇到相关问题，难怪我没听过这个概念。难怪写强类型语言的各大神都是JS一生黑…

后来大概问了问各种前辈，纷纷表示，这个概念在面试的时候和检查别人Bug的时候才会用到… (︶︿︶)

解释器是什么东东我还没搞明白…但是变量提升其实可以转换成另一个问题：
当你在定义一个变量的时候，解释器是怎么解析的？

先看一个例子：

1
2
3
4
5
function test(){
  console.log(a);
  var a = 123;
}
test(); //调用这个函数，你会看到console中输出的是undefined

1
2
3
function test(){
  var a = 123;
}

上面的代码，解释器是这么理解的：

1
2
3
4
function test(){
  var a; 
  a = 123;
}

而最开始的例子中，解释器是这么理解的：

1
2
3
4
5
function test(){
  var a;
  console.log(a);
  a = 123;
}

一句话总结：变量提升就是JS解释器在解析JS的时候会把所有变量的声明提升到该变量作用域的最顶端。

请注意：只提升声明，不提升赋值！