摘要：塊級作用域存在于函數內部塊中字符和之間的區域和塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量。和都是塊級聲明的一種。值得一提的是聲明不允許修改綁定，但允許修改值。這意味著當用聲明對象時沒有問題報錯臨時死區臨時死區，簡寫為。

通過 var 聲明的變量存在變量提升的特性：

if (condition) {
    var value = 1;
}
console.log(value);

初學者可能會覺得只有 condition 為 true 的時候，才會創建 value，如果 condition 為 false，結果應該是報錯，然而因為變量提升的原因，代碼相當于：

var value;
if (condition) {
    value = 1;
}
console.log(value);

如果 condition 為 false，結果會是 undefined。

除此之外，在 for 循環中：

for (var i = 0; i < 10; i++) {
    ...
}
console.log(i); // 10

即便循環已經結束了，我們依然可以訪問 i 的值。

為了加強對變量生命周期的控制，ECMAScript 6 引入了塊級作用域。

塊級作用域存在于：

函數內部

塊中(字符 { 和 } 之間的區域)

塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量。

let 和 const 都是塊級聲明的一種。

我們來回顧下 let 和 const 的特點：

1.不會被提升

if (false) {
    let value = 1;
}
console.log(value); // Uncaught ReferenceError: value is not defined

2.重復聲明報錯

var value = 1;
let value = 2; // Uncaught SyntaxError: Identifier "value" has already been declared

3.不綁定全局作用域

當在全局作用域中使用 var 聲明的時候，會創建一個新的全局變量作為全局對象的屬性。

var value = 1;
console.log(window.value); // 1

然而 let 和 const 不會：

let value = 1;
console.log(window.value); // undefined

再來說下 let 和 const 的區別：

const 用于聲明常量，其值一旦被設定不能再被修改，否則會報錯。

值得一提的是：const 聲明不允許修改綁定，但允許修改值。這意味著當用 const 聲明對象時：

const data = {
    value: 1
}

// 沒有問題
data.value = 2;
data.num = 3;

// 報錯
data = {}; // Uncaught TypeError: Assignment to constant variable.

臨時死區(Temporal Dead Zone)，簡寫為 TDZ。

let 和 const 聲明的變量不會被提升到作用域頂部，如果在聲明之前訪問這些變量，會導致報錯：

console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;

這是因為 JavaScript 引擎在掃描代碼發現變量聲明時，要么將它們提升到作用域頂部(遇到 var 聲明)，要么將聲明放在 TDZ 中(遇到 let 和 const 聲明)。訪問 TDZ 中的變量會觸發運行時錯誤。只有執行過變量聲明語句后，變量才會從 TDZ 中移出，然后方可訪問。

看似很好理解，不保證你不犯錯：

var value = "global";

// 例子1
(function() {
    console.log(value);

    let value = "local";
}());

// 例子2
{
    console.log(value);

    const value = "local";
};

兩個例子中，結果并不會打印 "global"，而是報錯 Uncaught ReferenceError: value is not defined，就是因為 TDZ 的緣故。

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 3

一個老生常談的面試題，解決方案如下：

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = (function(i){
        return function() {
            console.log(i);
        }
    }(i))
}
funcs[0](); // 0

ES6 的 let 為這個問題提供了新的解決方法：

var funcs = [];
for (let i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 0

問題在于，上面講了 let 不提升，不能重復聲明，不能綁定全局作用域等等特性，可是為什么在這里就能正確打印出 i 值呢？

如果是不重復聲明，在循環第二次的時候，又用 let 聲明了 i，應該報錯呀，就算因為某種原因，重復聲明不報錯，一遍一遍迭代，i 的值最終還是應該是 5 呀，還有人說 for 循環的
設置循環變量的那部分是一個多帶帶的作用域，就比如：

for (let i = 0; i < 3; i++) {
  let i = "abc";
  console.log(i);
}
// abc
// abc
// abc

這個例子是對的，如果我們把 let 改成 var 呢？

for (var i = 0; i < 3; i++) {
  var i = "abc";
  console.log(i);
}
// abc

為什么結果就不一樣了呢，如果有多帶帶的作用域，結果應該是相同的呀……

如果要追究這個問題，就要拋棄掉之前所講的這些特性！這是因為 let 聲明在循環內部的行為是標準中專門定義的，不一定就與 let 的不提升特性有關，其實，在早期的 let 實現中就不包含這一行為。

我們查看 ECMAScript 規范第 13.7.4.7 節:

我們會發現，在 for 循環中使用 let 和 var，底層會使用不同的處理方式。

那么當使用 let 的時候底層到底是怎么做的呢？

簡單的來說，就是在 for (let i = 0; i < 3; i++) 中，即圓括號之內建立一個隱藏的作用域，這就可以解釋為什么:

for (let i = 0; i < 3; i++) {
  let i = "abc";
  console.log(i);
}
// abc
// abc
// abc

然后每次迭代循環時都創建一個新變量，并以之前迭代中同名變量的值將其初始化。這樣對于下面這樣一段代碼

var funcs = [];
for (let i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 0

就相當于：

// 偽代碼
(let i = 0) {
    funcs[0] = function() {
        console.log(i)
    };
}

(let i = 1) {
    funcs[1] = function() {
        console.log(i)
    };
}

(let i = 2) {
    funcs[2] = function() {
        console.log(i)
    };
};

當執行函數的時候，根據詞法作用域就可以找到正確的值，其實你也可以理解為 let 聲明模仿了閉包的做法來簡化循環過程。

不過到這里還沒有結束，如果我們把 let 改成 const 呢？

var funcs = [];
for (const i = 0; i < 10; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // Uncaught TypeError: Assignment to constant variable.

結果會是報錯，因為雖然我們每次都創建了一個新的變量，然而我們卻在迭代中嘗試修改 const 的值，所以最終會報錯。

說完了普通的 for 循環，我們還有 for in 循環呢~

那下面的結果是什么呢？

var funcs = [], object = {a: 1, b: 1, c: 1};
for (var key in object) {
    funcs.push(function(){
        console.log(key)
    });
}

funcs[0]()

結果是 "c";

那如果把 var 改成 let 或者 const 呢？

使用 let，結果自然會是 "a"，const 呢？ 報錯還是 "a"?

結果是正確打印 "a"，這是因為在 for in 循環中，每次迭代不會修改已有的綁定，而是會創建一個新的綁定。

在 Babel 中是如何編譯 let 和 const 的呢？我們來看看編譯后的代碼：

let value = 1;

編譯為:

var value = 1;

我們可以看到 Babel 直接將 let 編譯成了 var，如果是這樣的話，那么我們來寫個例子：

if (false) {
    let value = 1;
}
console.log(value); // Uncaught ReferenceError: value is not defined

如果還是直接編譯成 var，打印的結果肯定是 undefined，然而 Babel 很聰明，它編譯成了：

if (false) {
    var _value = 1;
}
console.log(value);

我們再寫個直觀的例子：

let value = 1;
{
    let value = 2;
}
value = 3;

var value = 1;
{
    var _value = 2;
}
value = 3;

本質是一樣的，就是改變量名，使內外層的變量名稱不一樣。

那像 const 的修改值時報錯，以及重復聲明報錯怎么實現的呢？

其實就是在編譯的時候直接給你報錯……

那循環中的 let 聲明呢？

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 0

Babel 巧妙的編譯成了：

var funcs = [];

var _loop = function _loop(i) {
    funcs[i] = function () {
        console.log(i);
    };
};

for (var i = 0; i < 10; i++) {
    _loop(i);
}
funcs[0](); // 0

在我們開發的時候，可能認為應該默認使用 let 而不是 var ，這種情況下，對于需要寫保護的變量要使用 const。然而另一種做法日益普及：默認使用 const，只有當確實需要改變變量的值的時候才使用 let。這是因為大部分的變量的值在初始化后不應再改變，而預料之外的變量之的改變是很多 bug 的源頭。

ES6 系列目錄地址：https://github.com/mqyqingfen...

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標簽模板、箭頭函數、Symbol、Set、Map 以及 Promise 的模擬實現、模塊加載方案、異步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎star，對作者也是一種鼓勵。