块级声明的绑定机制

过去，JS 缺乏块作用域，var 声明时的声明提升、属性变量等行为让人困惑。

ES6 新引入的块级声明绑定机制 — let 和 const 声明机制，可以帮我们更好地控制作用域。

[ 块级声明 ] 主要用于声明在指定块的作用域之外无法访问的变量，它存在于：

1. 函数内部

2. {} 之间的块区域内默认使用 const，只有确实需要改变变量的值时使用 let

如果希望在 window 对象下定义变量，要使用 var 声明。如果不希望，则使得 let 或 const 。

var 声明

[ 变量提升 ] var 声明会发生”变量提升“现象，即变量可以在声明之前使用，值为 undefined。

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

如果没有javascript开发经验，可能会认为只有condition为true时，才会创建变量value；
但实际上，在预编译阶段，javascript引擎会将上面的函数修改成下面这样：

function getValue(condition){
    var value;
    if(condition){
        value = 'blue';
        return value;
    }else{
        return null;
    }
}

变量 value 的声明被提升到函数顶部，而初始化操作依然留在原处。

如果不注意，很可能引起错误，为此，ES6 引入了块级作用域来强化对变量生命周期的控制。

let 声明（ ES6 ）

let 声明的用法与 var 声明相同。用 let 代替 var 来声明变量，就可以把变量的作用域限制在当前代码块中。

function getValue(condition){
    if(condition){
        let value = 'blue';
        return value;
    }else{
         //变量value在此处不存在
        return null;
    }
    //变量value在此处不存在
}

变量 value 改由关键字 let 进行声明后，不再被提升到函数顶部。

执行流离开 if 块时，value 立刻被销毁。如果 condition 的值为 false，就永远不会声明并初始化 value。

[ 禁止重声明 ] 假设作用域中已经存在某个标识符，此时再使用let关键字声明它就会抛出错误。

var count = 30;

//抛出语法错误
//Uncaught SyntaxError: Identifier 'count' has already been declared
let count = 40;

const 声明（ ES6 ）

使用 const 声明的是常量，其值一旦被设定后不可更改。因此，每个通过 const 声明的常量必须进行初始化。

const num = 30;

//抛出语法错误
//Uncaught SyntaxError: Missing initializer in const declaration
const name;

const 常量，也只在当前代码块中有效，一旦执行到块外会立即被销毁；常量同样也不会被提升到作用域顶部。
if(condition){
    const num = 30;    
}
//此处无法访问num
[ 禁止重声明 ] 与 let 类似，同一作用域内用 const 声明已经存在的标识符会导致语法错误。
var message = 'hello';
let num = 10;
 
//这两条语句都会抛出错误
const message = "goobye";
const num = 30;

[ 无法再赋值 ] const 与 let 声明最大的不同之处在于，const 声明的常量无法再赋值。

let num1 = 10;
num1= 20;
 
const num2 = 10;
// Uncaught TypeError: Assignment to constant variable.
   num2 = 20;

[ 可修改对象属性 ] const 不允许修改绑定，但允许修改值。这意味着用 const 声明对象后，可以修改该对象的属性值。

const person = {
    name: 'lynn'
};

// 可以修改对象属性的值
   person.name = 'jack';    
   console.log(person);  // Object {name: "jack"}
 
//抛出语法错误 Uncaught TypeError: Assignment to constant variable.
person = {
    name: 'jack'
}

最佳实践

默认使用 const，只有确实需要改变变量的值时使用 let。

因为大部分变量的值在初始化后不应再改变，而预料外的变量值的改变是很多 bug 的源头。

[ 临时死区 ] 与 var 不同，let 和 const 声明的变量不会被提升到作用域顶部，如果在声明之前访问这些变量，会引发错误，而从作用域顶部到声明变量语句之前的这个区域，被称为临时死区（ temporal dead zone ），简称为 TDZ。

if(true){
    //undefined
    console.log(typeof value);
    var value = "blue";
}
 
if(true){
    //Uncaught ReferenceError: value is not defined
    console.log(typeof value);
    let value = "blue";
}

但是，在 let 或 const 声明的作用域之外使用该变量就不会报错。

// undefined
console.log(typeof value);
if(true){
    let value = "blue";
}

[ 循环绑定 ] 长久以来，var 声明使得在循环中创建函数异常困难，因为变量到了循环之外仍能访问

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

// 上面代码中，预期的结果是输出数字0-9，但它却一连串输出了10次10，这是因为：
   循环里的每次迭代同时共享着变量i，循环内部创建的函数全都保留了对相同变量的引用，
   循环结束时变量i的值为10，所以每次调用console.log(i)时就会输出10。

IIFE：为解决这个问题，可以在循环中使用立即调用函数表达式（ IIFE ），以强制生成计数器变量的副本。

在循环内部，IIFE 表达式为接受的每一个变量i都创建了一个副本并存储为变量 value，这个变量的值就是相应迭代创建的函数所使用的值，因此调用每个函数都会像从 0-9 循环一样得到期望的值。
var funcs = [];
for(var i = 0; i < 10; i++){
    funcs.push((function(value){
        return function(){
            //0
            //1
            //...
            //9
            console.log(value);
        }
    })(i));
}
funcs.forEach(function(func){
    func();
})

let：let 声明模仿上例中 IIFE 所做的一切来简化循环过程。

每次迭代循环都会创建一个新变量，并以之前迭代中同名变量的值将其初始化。
var funcs = [];
for(let i = 0; i < 10; i++){
    funcs.push(function(){
        //0
        //1
        //...
        //9
        console.log(i);
    });
}
funcs.forEach(function(func){
    func();
})

// 以上这段循环相比之下更为简洁，每次循环时let声明都会创建一个新变量i，并将其初始化为i的当前值，所以循环内部创建的每个函数都能得到属性它们自己的i的副本
对于 for-in 循环和 for-of 循环来说也是一样的：
var funcs = [];
obj = {
    a:true,
    b:true,
    c:true
}
for(let key in obj){
    funcs.push(function(){
        //a
        //b
        //c
        console.log(key);
    })
}
funcs.forEach(function(func){
    func();
})
const：对于 const 声明来说，由于其无法改变变量的值，所以无法使用普通的 for 循环。
var funcs = [];
for(const i = 0; i &lt; 10; i++){
    funcs.push(function(){
            //Uncaught TypeError: Assignment to constant variable.
        console.log(i);
    });
}
funcs.forEach(function(func){
    func();
})
由于 for-in 循环中每次迭代不会修改已有绑定，而是创建一个新绑定，所以在 for-in 循环中可以使用 const。
var funcs = [];
obj = {
    a:true,
    b:true,
    c:true
}
for(const key in obj){
    funcs.push(function(){
        //a
        //b
        //c
        console.log(key);
    })
}
funcs.forEach(function(func){
    func();
})

[ 全局变量 ] 对 var 声明的变量来说，如果处于全局作用域，它们会自动成为 window 对象的属性。

这意味着用 var 很可能无意中覆盖一个已经存在的全局变量。
//function RegExp() { [native code] }
console.log(RegExp);
var RegExp = "hello";
console.log(RegExp);//'hello'
console.log(window.RegExp);//'hello'
如果使用 let 或 const 声明的变量，不会成为 window 对象的属性
let RegExp = "hello";
console.log(RegExp);  // 'hello'
console.log(window.RegExp);  // function RegExp() { [native code] }
因此，如果希望在 window 对象下定义变量，要使用 var 声明。如果不希望，则使得 let 或 const 。