作用域和预解析阶段变量提升考察

下面代码输出什么？

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

这里先放个占位图遮住答案，如果不能清楚的得到结果，那么请往下看

image.png

结果：依次输出：undefined -> 10 -> 20

下面说下原理。

js代码执行存在两个阶段：

• 预解析
• 执行

预解析阶段，实际解析出来的js代码如下：

var a
a = 10
(function () {
    var a // var的变量默认值为undefiend
    console.log(a) // undefiend
    a = 5
    console.log(window.a) // 取window下的a，即全局作用域下的a，10
    a = 20
    console.log(a) // 20
})()