JS变量提升(Hoisting) #10

Posted 4 years ago · 1 mins reading

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

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

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

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

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

先看一个例子:

js
function test() {
console.log(a);
var a = 123;
}
test(); //调用这个函数,你会看到console中输出的是undefined
js
function test() {
var a = 123;
}

上面的代码,解释器是这么理解的:

js
function test() {
var a;
a = 123;
}

而最开始的例子中,解释器是这么理解的:

js
function test() {
var a;
console.log(a);
a = 123;
}

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

请注意:只提升声明,不提升赋值