浅浅浅谈JavaScript作用域

为了方便理解我们先看一段代码

a = 2;
var a; 
console.log( a );

得到的结果是什么呢，undefined、ReferenceError异常、2还是其他呢
实际上这里会输出2，为什么呢，我们再看

console.log( a ); 
var a = 2;

结果又是什么呢？
答案是undefined

要了解这些，我们就需要了解作用域是什么了。

那么作用域是什么呢，简单来说就是机器再运行某段代码时候的代码存在的环境。

var color = "blue";
function changeColor() {
    var anotherColor = "red";
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        // 这里可以访问color、anotherColor和tempColor
    }
    // 这里可以访问color和anotherColor，不能访问tempColor
    swapColor()
}
// 这里只能访问到color
changeColor()

这段代码涉及到三个执行环境：全局环境、changeColor()的局部环境和swapColor()的局部环境。也就是作用域。

我们可以看出，每一个花括号形成了一个作用域，越内部的作用域可访问到越多，这是因为JavaScript的代码执行时会向上访问，如果当前作用域找不到要访问的对象，对向上一级作用域查询，最终查找到全局作用域，都查询不到的话抛出错误。

回到开头的代码，在我们看来var a = 2是一段代码，而JavaScript不这么看，它看到的是
var a和a =2
JavaScript会将申明移到作用域的顶端，所以第一段代码在console.log(a)的时候就访问到了值，而第二段代码在console.log(a)的时候只做了var a 动作，a没有实际的值，所以结果是undefined。
——ps：es6 出现了const和let两种申明方式，这两种申明不会进行提升

a = 2;
let a; 
console.log( a ); // Uncaught ReferenceError: a is not defined

参考资料：
《JavaScript高级程序设计》
《你不知道的JavaScript（上卷）》