浅浅浅谈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（上卷）》