摘要：塊級(jí)作用域存在于函數(shù)內(nèi)部塊中字符和之間的區(qū)域和塊級(jí)聲明用于聲明在指定塊的作用域之外無(wú)法訪問(wèn)的變量。和都是塊級(jí)聲明的一種。值得一提的是聲明不允許修改綁定，但允許修改值。這意味著當(dāng)用聲明對(duì)象時(shí)沒(méi)有問(wèn)題報(bào)錯(cuò)臨時(shí)死區(qū)臨時(shí)死區(qū)，簡(jiǎn)寫(xiě)為。

通過(guò) var 聲明的變量存在變量提升的特性：

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

初學(xué)者可能會(huì)覺(jué)得只有 condition 為 true 的時(shí)候，才會(huì)創(chuàng)建 value，如果 condition 為 false，結(jié)果應(yīng)該是報(bào)錯(cuò)，然而因?yàn)樽兞刻嵘脑?，代碼相當(dāng)于：

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

如果 condition 為 false，結(jié)果會(huì)是 undefined。

除此之外，在 for 循環(huán)中：

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

即便循環(huán)已經(jīng)結(jié)束了，我們依然可以訪問(wèn) i 的值。

為了加強(qiáng)對(duì)變量生命周期的控制，ECMAScript 6 引入了塊級(jí)作用域。

塊級(jí)作用域存在于：

函數(shù)內(nèi)部

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

塊級(jí)聲明用于聲明在指定塊的作用域之外無(wú)法訪問(wèn)的變量。

let 和 const 都是塊級(jí)聲明的一種。

我們來(lái)回顧下 let 和 const 的特點(diǎn)：

1.不會(huì)被提升

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

2.重復(fù)聲明報(bào)錯(cuò)

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

3.不綁定全局作用域

當(dāng)在全局作用域中使用 var 聲明的時(shí)候，會(huì)創(chuàng)建一個(gè)新的全局變量作為全局對(duì)象的屬性。

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

然而 let 和 const 不會(huì)：

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

再來(lái)說(shuō)下 let 和 const 的區(qū)別：

const 用于聲明常量，其值一旦被設(shè)定不能再被修改，否則會(huì)報(bào)錯(cuò)。

值得一提的是：const 聲明不允許修改綁定，但允許修改值。這意味著當(dāng)用 const 聲明對(duì)象時(shí)：

const data = {
    value: 1
}

// 沒(méi)有問(wèn)題
data.value = 2;
data.num = 3;

// 報(bào)錯(cuò)
data = {}; // Uncaught TypeError: Assignment to constant variable.

臨時(shí)死區(qū)(Temporal Dead Zone)，簡(jiǎn)寫(xiě)為 TDZ。

let 和 const 聲明的變量不會(huì)被提升到作用域頂部，如果在聲明之前訪問(wèn)這些變量，會(huì)導(dǎo)致報(bào)錯(cuò)：

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

這是因?yàn)?JavaScript 引擎在掃描代碼發(fā)現(xiàn)變量聲明時(shí)，要么將它們提升到作用域頂部(遇到 var 聲明)，要么將聲明放在 TDZ 中(遇到 let 和 const 聲明)。訪問(wèn) TDZ 中的變量會(huì)觸發(fā)運(yùn)行時(shí)錯(cuò)誤。只有執(zhí)行過(guò)變量聲明語(yǔ)句后，變量才會(huì)從 TDZ 中移出，然后方可訪問(wèn)。

看似很好理解，不保證你不犯錯(cuò)：

var value = "global";

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

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

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

    const value = "local";
};

兩個(gè)例子中，結(jié)果并不會(huì)打印 "global"，而是報(bào)錯(cuò) Uncaught ReferenceError: value is not defined，就是因?yàn)?TDZ 的緣故。

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

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

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

ES6 的 let 為這個(gè)問(wèn)題提供了新的解決方法：

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

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

如果是不重復(fù)聲明，在循環(huán)第二次的時(shí)候，又用 let 聲明了 i，應(yīng)該報(bào)錯(cuò)呀，就算因?yàn)槟撤N原因，重復(fù)聲明不報(bào)錯(cuò)，一遍一遍迭代，i 的值最終還是應(yīng)該是 5 呀，還有人說(shuō) for 循環(huán)的
設(shè)置循環(huán)變量的那部分是一個(gè)多帶帶的作用域，就比如：

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

這個(gè)例子是對(duì)的，如果我們把 let 改成 var 呢？

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

為什么結(jié)果就不一樣了呢，如果有多帶帶的作用域，結(jié)果應(yīng)該是相同的呀……

如果要追究這個(gè)問(wèn)題，就要拋棄掉之前所講的這些特性！這是因?yàn)?let 聲明在循環(huán)內(nèi)部的行為是標(biāo)準(zhǔn)中專(zhuān)門(mén)定義的，不一定就與 let 的不提升特性有關(guān)，其實(shí)，在早期的 let 實(shí)現(xiàn)中就不包含這一行為。

我們查看 ECMAScript 規(guī)范第 13.7.4.7 節(jié):

我們會(huì)發(fā)現(xiàn)，在 for 循環(huán)中使用 let 和 var，底層會(huì)使用不同的處理方式。

那么當(dāng)使用 let 的時(shí)候底層到底是怎么做的呢？

簡(jiǎn)單的來(lái)說(shuō)，就是在 for (let i = 0; i < 3; i++) 中，即圓括號(hào)之內(nèi)建立一個(gè)隱藏的作用域，這就可以解釋為什么:

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

然后每次迭代循環(huán)時(shí)都創(chuàng)建一個(gè)新變量，并以之前迭代中同名變量的值將其初始化。這樣對(duì)于下面這樣一段代碼

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

就相當(dāng)于：

// 偽代碼
(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)
    };
};

當(dāng)執(zhí)行函數(shù)的時(shí)候，根據(jù)詞法作用域就可以找到正確的值，其實(shí)你也可以理解為 let 聲明模仿了閉包的做法來(lái)簡(jiǎn)化循環(huán)過(guò)程。

不過(guò)到這里還沒(méi)有結(jié)束，如果我們把 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.

結(jié)果會(huì)是報(bào)錯(cuò)，因?yàn)殡m然我們每次都創(chuàng)建了一個(gè)新的變量，然而我們卻在迭代中嘗試修改 const 的值，所以最終會(huì)報(bào)錯(cuò)。

說(shuō)完了普通的 for 循環(huán)，我們還有 for in 循環(huán)呢~

那下面的結(jié)果是什么呢？

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

funcs[0]()

結(jié)果是 "c";

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

使用 let，結(jié)果自然會(huì)是 "a"，const 呢？ 報(bào)錯(cuò)還是 "a"?

結(jié)果是正確打印 "a"，這是因?yàn)樵?for in 循環(huán)中，每次迭代不會(huì)修改已有的綁定，而是會(huì)創(chuàng)建一個(gè)新的綁定。

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

let value = 1;

編譯為:

var value = 1;

我們可以看到 Babel 直接將 let 編譯成了 var，如果是這樣的話，那么我們來(lái)寫(xiě)個(gè)例子：

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

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

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

我們?cè)賹?xiě)個(gè)直觀的例子：

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

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

本質(zhì)是一樣的，就是改變量名，使內(nèi)外層的變量名稱(chēng)不一樣。

那像 const 的修改值時(shí)報(bào)錯(cuò)，以及重復(fù)聲明報(bào)錯(cuò)怎么實(shí)現(xiàn)的呢？

其實(shí)就是在編譯的時(shí)候直接給你報(bào)錯(cuò)……

那循環(huán)中的 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

在我們開(kāi)發(fā)的時(shí)候，可能認(rèn)為應(yīng)該默認(rèn)使用 let 而不是 var ，這種情況下，對(duì)于需要寫(xiě)保護(hù)的變量要使用 const。然而另一種做法日益普及：默認(rèn)使用 const，只有當(dāng)確實(shí)需要改變變量的值的時(shí)候才使用 let。這是因?yàn)榇蟛糠值淖兞康闹翟诔跏蓟蟛粦?yīng)再改變，而預(yù)料之外的變量之的改變是很多 bug 的源頭。

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

ES6 系列預(yù)計(jì)寫(xiě)二十篇左右，旨在加深 ES6 部分知識(shí)點(diǎn)的理解，重點(diǎn)講解塊級(jí)作用域、標(biāo)簽?zāi)０?、箭頭函數(shù)、Symbol、Set、Map 以及 Promise 的模擬實(shí)現(xiàn)、模塊加載方案、異步處理等內(nèi)容。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star，對(duì)作者也是一種鼓勵(lì)。