ES6的块级作用域

本节我们来学习块级作用域，ES5 中只有全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域，或者循环中的变量泄露为全局变量。

示例：

函数作用域覆盖全局作用域：

var a = 1;
function test() {
    console.log(a);  // 由于变量提升，导致内层的a变量覆盖了外层的a变量
    if (true) {
        var a  = 10;
    }
}
test();   // 输出：undefined

循环中的变量泄露为全局变量：

for(var i=0; i<5; i++) {
    console.log(i);  // 输出：0 1 2 3 4
}
console.log(i); // 输出：5

ES6的块级作用域

let 实际上为 JavaScript 新增了块级作用域，外层作用域无法获取到内层作用域，这样非常安全。即使外层和内层都使用相同变量名，也都互不干扰。

示例：

例如下面这段代码：

function test() {
    let a = 1;
    if(true){
      let a = 10;
      console.log(a);  // 输出：10
    }
    console.log(a);   // 输出：1
}

test();  // 调用函数

在函数 test() 和 if 语句代码块中都声明了变量 a，但是因为 let 命令声明的变量只在块级作用域中起作用，所以在 if 中输出 a 的值为 10，在 test() 中输出 a 的值为 1，这两者互不干扰。

块级作用域与函数声明

在 ES5 中规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。而在 ES6 中引入了块级作用域，允许函数可以在块级作用域中声明。块级作用域之中，函数声明语句的行为类似于 let，在块级作用域之外不可引用。

示例：

我们来看一个例子：

{
    if(true){
        function test(){
            console.log("你好，侠课岛！")
        }
    }
}

test();

执行代码，输出结果为“你好，侠课岛！”。

但是一般考虑到兼容等问题，我们应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

示例：

上述代码使用函数表达式来写：

{
    if(true){
        let test = function (){
            console.log("你好，侠课岛！");
        };
    }
}

除此之外，还有一个地方我们需要注意一下， ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

示例：

例如像下面这样写会报错：

// 声明函数
if (true)
    let func = function () {};

// 声明变量
if (true) let a = 1;

报错信息如下所示：

SyntaxError: Lexical declaration cannot appear in a single-statement context

上述代码中因为没有大括号，所以不存在块级作用域，不管是声明函数还是声明变量都会报错。