块级绑定

深入理解ES6之块级绑定

var 声明与变量提升

在下面的示例中，无论condition是否为true,value都会被创建：

function getValue(condition){
    if(condition){
        var value = "blue";
        return value;
    }else{
        return null;
        //value 在此处可访问，值为undefined
    }
    //value 在此处可访问，值为undefined
}

块级声明

1. 块级声明就是让所声明的变量在指定块的作用域外无法被访问；
2. 块级作用域（词法作用域）在如下情况被创建：
   1. 在一个函数内部；
   2. 在一个代码块（由一对花括号包裹）内部。
3. 目的是为了给JS添加灵活性以及与其他语言的一致性。

let声明

let声明的语法与var的语法一直。基本可以用let代替var进行变量声明，但是会将变量的作用域限制在当前代码块中。如果let声明的变量在整个代码块内部可用，需要手动将let声明防止到顶部。
在如下示例中，value在if代码块外部是无法访问的，并且在condition的值为false时，该变量永远不会被声明并初始化。

function getValue(condition){
    if(condition){
        let value ="blue";
        return value;
    }else{
        // value 在此处不可用
        return null;
    }
    //value 在此处不可用
}

禁止重复声明

如果一个标识符已经在代码块内部被定义，那么在此代码块内使用同一个标识符进行let声明就会导致跑出错误。例如：

var count = 30;
//语法错误
let count = 40;

在本例中，count被声明了两次：一次使用var，另一次使用let。因为let不能在同一作用域内重复声明一个已有标识符，此处的let声明就会抛出错误。在嵌套的作用域内使用let声明一个同名的新变量，则不会抛出错误，如下，原因是因为它在if语句内部创建了一个新的count变量，二不是在同一级别再次创建此变量。在if代码块内部，这个新变量会屏蔽全局的count变量，从而在局部组织对于后者的访问。

var count = 30;
//不会抛出错误
if(condition){
    let count = 40;
    //其他代码
}

常量声明

使用const声明的变量会被认为是常量（constant），它们的值在被设置完成后就不能再被改变，所以，所有的const变量都需要在声明时进行初始化，示例如下：

//有效的常量
const maxItens = 30;
//语法错误：未进行初始化
const name;

对比常量声明与 let 声明

1. 两者都是块级声明。这意味着在声明它们的语句块外部是无法访问的，并且声明也不会被声明，示例如下：

   if(condition){
       const maxItems = 5;
       //其他代码
   }
   //maxItems 在此处无法访问
   

2. const声明会在统一作用域（全局或是函数作用域）内定义一个已有变量是会抛出错误，无论该变量此前是用var还是let声明的。示例如下：

   var message = "Hello";
   let age = 25;
   
   //二者均会抛出错误
   const message = "Goodbye";
   const age = 30;
   

3. 重大区别：试图对之前用const声明的变量进行赋值会抛出错误，无论实在严格模式还是非严格模式下。如果声明的变量是一个对象，它所包含的值是可以被修改的。

使用const声明对象

const 声明会阻止对于变量绑定与变量自身值的修改，这意味着const声明并不会组织对变量成员的修改。示例如下，记住：const阻止的是对于变量绑定的修改，而不阻止对成员值的修改。

const person = {
    name:"Nicholas"
}
//正常工作
person.name = "Greg";
//抛出错误
person = {
    name:"Greg"
};

暂时性死区 TDZ( temporal dead zone )

使用 let 或 const 声明的变量，在达到声明处志强是无法访问的，试图访问会导致一个引用错误，即使在通常是安全的操作时（例如使用 typeof 运算符），也是如此。示例如下:

if (condition){
    console.log(typeof value); // 引用错误
    let value = "blue";
}

循环中的块级绑定

开发者最需要使用变量的块级作用域的场景，或许就是在for循环内，也就是想让一次性的循环计数器仅能在循环内部使用，示例如下,j仅在for循环内部可用，一旦循环结束，该变量在任意位置都不可访问。

for(var i = 0;i < 10;i++) {
    process(items[i]);
}
// i 在此处仍然可悲访问
console.log(i); //10

for(let j = 0;j < 10;j++) {
    process(items[j]);
}
//i 在此处不可访问，抛出错误
console.log(i);

循环内的函数

var 的特点使得循环变量在循环作用域之外仍然可被访问，于是在循环内创建函数就变得很有问题。如下示例,

var funcs = [];
for(var i = 0; i < 10; i++) {
    funcs.push(function(){console.log(i);});
}
funcs.forEach(function(func){
    func() //输出数值“10”十次
});

为什么会输出十次“10”？这是因为变量 i 在循环的每次迭代中都被共享了，意味着循环内创建的那些函数都用有对于同一变量的引用。在循环结束后，变量 i 的值会是10，因此当 console.log(i) 被调用时，每次都打印出10。为了修正这个问题，开发者在循环内使用立即调用函数表达式( IIFES )，以便在每次迭代中强制创建变量的一个新的副本，示例如下：

var funcs = [];
for(var i = 0; i < 10; i++){
    funcs.push((function(value){
        return function(){
            console.log(value);
        }
    }(i)));
}
funcs.forEach(function(func){
    func(); //从0到9依次输出
})

循环内的 let 声明

重点：let 声明在循环内部的行为是在规范中特别定义的，而与不提升变量声明的特征没有必然联系。事实上，在早期 let 的实现中并没有这种行为，它是后来才添加的。

循环内的常量声明

1. 在for循环中，如果使用 const 声明变量，在第二次循环时会抛出错误，示例如下：

   var funcs = [];
   //在一次迭代后抛出错误
   for(const i = 0; i < 10; i++){
       funcs.push(function(){
           console.log(i);
       })
   }
   

2. const 变量在 for-in 或 for-of 循环中使用时，与 let 变量效果相同，示例如下：

   var funcs = [];
   object = {
       a:true,
       b:true,
       c:true
   };
   //不会导致错误
   for(const key in object){
       funcs.push(function(){
           console.log(key);
       });
   }
   funcs.forEach(function(func){
       func(); //依次输出 “a”、“b”、“c”
   })
   

全局块级绑定

1. 使用 var 全局声明变量时，它会创建一个新的全局变量，并成为全局对象（在浏览器中是 window ）的一个属性，这意味着使用 var 可能会无意覆盖一个已有的全局属性。
2. 使用 let 或 const 全局声明变量，虽然在全局作用域上会创建新的绑定，但是不会有任何属性被添加到全局对象上，这意味着你不能使用 let 或 const 来覆盖一个全局变量，你只能将其屏蔽。当你不想在全局对象上创建属性时，这种特性会让 let 与 const 在全局作用域中更安全。

块级绑定新的最佳实践

在 ES6 的发展阶段，被广泛认可的变量声明方式是：默认情况下应当使用 let 而不是 var。对需要收到保护的变量使用 const。
一种更流行的替代方案是：在默认情况下使用 const 、并且只在知道变量值需要被更改的情况下才使用 let 。

总结

let 与 const 块级绑定将词法作用域引入了 JS 。这两种声明方式都不会进行提升，并且 只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明，其表现更加接近 其他语言，并且能减少无心错误的产生。作为一个副作用，你不能在变量声明位置之前访问 它们，即便使用的是 typeof 这样的安全运算符。由于块级绑定存在暂时性死区（ TDZ ）， 试图在声明位置之前访问它就会导致错误。
let 与 const 的表现在很多情况下都相似于 var ，然而在循环中就不是这样。在 for-in 与 for-of 循环中， let 与 const 都能在每一次迭代时创建一个新的绑定，这意味着在循 环体内创建的函数可以使用当前迭代所绑定的循环变量值（而不是像使用 var 那样，统一使 用循环结束时的变量值）。这一点在 for 循环中使用 let 声明时也成立，不过在 for 循 环中使用 const 声明则会导致错误。
块级绑定当前的最佳实践就是：在默认情况下使用 const ，而只在你知道变量值需要被更改 的情况下才使用 let 。这在代码中能确保基本层次的不可变性，有助于防止某些类型的错 误。