我的JavaScript学习笔记:作用域链

我们知道在ECMAScript中，作用域分为全局作用域和函数作用域以及块作用域。任何位置的代码都可以访问全局作用域中变量，但是函数作用外部的代码不能访问函数作用域的变量，快作用域也是如此。注意。这里我们说明一点，使用var没有块作用域的。

let globalVar=“这是全局作用域！”//全局作用域
function fn(){
let localVar="这是局部作用域！";//局部作用域
}
for(let i=0;i<3;i++){
let blockVar="这是块作用域";
}
console.log(globalVar);//这是全局作用域
console.log(localVar);//index.html:21 Uncaught ReferenceError: localVar is not defined，JavaScript抛出错误停止解析
console.log(blockVar);//index.html:21 Uncaught ReferenceError: blockVar is not defined

在上面的代码中，我们分别在全局作用域和局部作用域以及块作用域中定义了三个变量，然后在全局作用域中访问这个三个变量。我们只能访问全局变量globalVar。

注意，注意根据JavaScript引擎的解析顺序，你能不会得到这个解析错误：

console.log(blockVar);//index.html:21 Uncaught ReferenceError: blockVar is not defined。

这是因为JavaScript解析到console.log(localVar)时抛出错误后就会停止解析后面的代码。我们将console.log(localVar)和console.log(blockVar)互换位置就可以了。

如果我们在局函数作用中访问全局作用域和函数作用域以及块作用域中定义了三个变量：

let globalVar = "这是全局作用域！";//全局作用域
        function fn() {
            let localVar = "这是局部作用域！";//局部作用域
            console.log(globalVar);//这是全局作用域
            console.log(localVar);//这是局部作用域！
            console.log(blockVar);//index.html:18 Uncaught ReferenceError: blockVar is not defined
        }
        for (let i = 0; i < 3; i++) {
            let blockVar = "这是块作用域";
        }
        fn();

由上面的代码可知，在函数作用域中可以访问全局变量和该函数中定义的变量，但是不能访问块作用域中的变量。

 let globalVar = "这是全局作用域！";//全局作用域
        function fn() {
            let localVar = "这是局部作用域！";//局部作用域
        }
        for (let i = 0; i < 1; i++) {
            let blockVar = "这是块作用域";
            console.log(globalVar);//这是全局作用域
            console.log(blockVar);//这是块作用域
            console.log(localVar);//Uncaught ReferenceError: localVar is not defined
        }
        fn();

那么如果我们函数套函数，在最里层的函数中访问在嵌套函数和全局环境中定义的变量是否能够正确访问？答案是可以的

let color = "blue";
        function changeColor() {
            let anotherColor = "red";
            function swapColors() {
                let tempColor = anotherColor;
                anotherColor = color;
                color = tempColor;

                // 这里可以访问 color、anotherColor 和 tempColor
            }
            // 这里可以访问 color 和 anotherColor，但不能访问 tempColor
            swapColors();
        }
        // 这里只能访问 color
        changeColor(); 

上面的代码中，swapColors()中的变量能够访问changeColor()中的变量和全局环境中的变量。因为swapColors()函数是changeColor()的局部环境。但是changeColor()函数环境中的变量不能访问swapColors()函数中的变量。同理changeColor()函数环境中的变量能够访问全局环境中的变量，而全局环境中的变量不能访问changeColor()函数环境中的变量。所以这就由里（局部环境）向外（全局环境）形成了一条访问链条，这就是作用域链：

所以作用域链的访问顺序是由里向外，有局部到全局