很早就想系統(tǒng)的學(xué)習(xí)ES6了区端，奈何資源太少，把阮一峰大大的ES6通讀了一遍之后發(fā)現(xiàn)澳腹，沒(méi)有一點(diǎn)感覺(jué)织盼，是的，也許是自己的積累或者境界不夠酱塔，真的一點(diǎn)感覺(jué)都沒(méi)有沥邻，市面上可供學(xué)習(xí)參考的ES6的資料真的不多。之前一直盼望著《你不知道的JavaScript下卷》出中文版羊娃，聽(tīng)說(shuō)到11月份唐全，好吧。一次偶然蕊玷，得知《高程》的作者也寫(xiě)了ES6的書(shū)邮利，雖然中文版也沒(méi)有，但是真的忍不了的垃帅，用我的渣英語(yǔ)慢慢讀吧延届。

問(wèn)在前面：

1. 問(wèn)：用const申明的對(duì)象是可以修改的，對(duì)嗎贸诚？
   答：對(duì)方庭。
2. 用let申明的全局變量和用var申明的全局變量是一樣的嗎？
   答：不一樣酱固。

如果你都回答上了械念，并且知其然知其所以然，那你掌握的很好媒怯，不用往下看了订讼。如果并不知道，那就一起慢慢回顧一下吧扇苞。

var###

相信大家已經(jīng)對(duì)let欺殿，const有了一定的認(rèn)識(shí)寄纵，也應(yīng)該了解了塊級(jí)作用域以及var并沒(méi)有塊級(jí)作用域。
var沒(méi)有塊級(jí)作用域脖苏，具體體現(xiàn)在兩個(gè)方面程拭，一個(gè)是在函數(shù)中，一個(gè)是在循環(huán)中棍潘。具體例子如下：

var foo = function(a){
    if(a){
        var text = 'hello'
        return text
    }else{
        //這里也有text恃鞋，其值為undefined
        return null
    }
        //這里也有text，其值為undefined
}

其實(shí)我們的本意是希望如下代碼：

var foo = function(a){
    if(a){
        var text = 'hello'
        return text
    }else{
        //這里text未定義
        return null
    }
        //這里text未定義
}

但是因?yàn)?code>var沒(méi)有塊級(jí)作用域亦歉，并且存在變量提升恤浪，所以上述代碼其實(shí)與下面的寫(xiě)法相同：

var foo = function(a){
     var text;undefined
    if(a){
        text = 'hello'
        return text
    }else{
        //這里也有text，其值為undefined
        return null
    }
        //這里也有text肴楷，其值為undefined
}

這是在函數(shù)中水由，其實(shí)在循環(huán)中也一樣，比如：

for (var i = 0; i < 10; i++) {
   //做一些操作
}
//在外部赛蔫，i依舊存在砂客，并且會(huì)輸出10
console.log(i); //10           

很明顯，這是不符合常理的呵恢，我們期望的是：

for (var i = 0; i < 10; i++) {
   //做一些操作
}
//在外部鞠值，i未定義，報(bào)錯(cuò)
console.log(i); //ReferenceError       

然而并做不到渗钉。再來(lái)舉個(gè)例子彤恶，在循環(huán)中的函數(shù)，使用var晌姚，是更加糟糕粤剧，更加不符合常理的，比如：

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

其實(shí)我們期待的是挥唠，輸出0-9抵恋，但是事與愿違，輸出了10次10宝磨，為什么弧关？因?yàn)?code>for循環(huán)中的每一次迭代都共享著用var申明的i，也就是說(shuō)唤锉，這里的i不是分別在單獨(dú)的作用域里世囊，而是在同一個(gè)作用域里，是一個(gè)值窿祥，而不是十個(gè)株憾，所以，一改全改，最終變成輸出10個(gè)10嗤瞎。
如何解決這個(gè)問(wèn)題呢墙歪？
在ES5中，我們想到了用立即執(zhí)行函數(shù)（IIFE）贝奇，把每一個(gè)i的作用域分開(kāi)虹菲。具體代碼如下：

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
});

解決了，但是顯得太臃腫而且難以理解是不是掉瞳？是的毕源，一眼看過(guò)去很難看清楚這個(gè)函數(shù)到底想表達(dá)什么。但是陕习，如果我們一開(kāi)始就使用let代替var霎褐，這個(gè)世界就變得簡(jiǎn)單而清爽了：

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

符合邏輯，并且代碼清爽衡查。完美瘩欺！這就是let的魅力。下面讓我們來(lái)深入學(xué)習(xí)let拌牲。

let###

let和var差不多，只不過(guò)申明的變量有塊級(jí)作用域歌粥，并且不會(huì)變量提升塌忽。什么意思呢，就是說(shuō)失驶，let聲明的變量只存在于聲明它的{}內(nèi)部土居，或者循環(huán)體內(nèi)部，或者函數(shù)內(nèi)部嬉探，外部是不存在的擦耀。因?yàn)闆](méi)有變量提升，所以有暫時(shí)性死區(qū)涩堤。

暫時(shí)性死區(qū)

這個(gè)概念我覺(jué)得是相對(duì)于var來(lái)說(shuō)的眷蜓，因?yàn)?code>var有變量提升，所以先使用后申明是不會(huì)報(bào)錯(cuò)的胎围，而是undefined吁系，具體例子如下：

console.log(value);//undefined
var value = 10;
console.log(value);//10

其實(shí)這個(gè)就等于：

var value;
console.log(value);//undefined
value = 10;
console.log(value);//10

說(shuō)起變量提升，在這里想多說(shuō)一點(diǎn)白魂。函數(shù)用function (){····}這樣的方式汽纤，也有提升，而且是在變量提升之前福荸，也就是說(shuō)蕴坪，提升的優(yōu)先級(jí)比變量提升高，并且同名函數(shù)敬锐，后者會(huì)覆蓋前者背传。也就是說(shuō)：

foo();//b
function foo(){
    console.log('a')
}
function foo(){
    console.log('b')
}

扯遠(yuǎn)了捆等，現(xiàn)在回到let的暫時(shí)性死區(qū)，和var不同续室，請(qǐng)看下面的例子：

console.log(value);//報(bào)錯(cuò)栋烤，ReferenceError
let value = 10;
console.log(value);

因?yàn)闆](méi)有變量提升，所以只能先聲明挺狰，后使用明郭。
還要一些小細(xì)節(jié)，在同一作用域中var申明變量是可以重復(fù)申明的丰泊，并且后者覆蓋前者：

var a = 10;
var a = 20;
console.log(a)//20

而在let中薯定，這樣會(huì)報(bào)錯(cuò)：

let a = 10;
let a = 20;//報(bào)錯(cuò)，語(yǔ)法錯(cuò)誤瞳购，a已經(jīng)申明過(guò)了话侄。
console.log(a)

當(dāng)然，這樣也不行：

var a = 10;
let a = 20;//報(bào)錯(cuò)学赛，語(yǔ)法錯(cuò)誤年堆，a已經(jīng)申明過(guò)了。
console.log(a)

不同作用域盏浇，是可以的：

var a = 10;
function foo(){
   let a = 20;//合法
}

回到最初提出的問(wèn)題之一变丧，全局作用域下，let和var申明的變量的不同之處
首先绢掰，var大家都了解痒蓬，全局申明的變量在瀏覽器中就是window的屬性，比如：

var a = 10;
window.a//10

給個(gè)最直觀的例子：

let a = 10;
window.a//報(bào)錯(cuò)滴劲，a未定義

明顯可以看出攻晒，這是不同的。下面班挖，我們來(lái)深入一點(diǎn)鲁捏，用var申明全局變量并沒(méi)有想象中的那么好，比如：

var RegExp = 10;
window.RegExp//10

是不是賊恐怖聪姿？把內(nèi)置對(duì)象給干掉了碴萧，如此危險(xiǎn)的操作，肯定是要避免的末购。用let就可以避免了：

let RegExp = 10;
window.RegExp//function RegExp() { [native code] }
console.log(RegExp )//10

為什么會(huì)這樣破喻？因?yàn)橛?code>var申明的全局變量會(huì)當(dāng)做window對(duì)象的屬性，而let申明的全局變量盟榴，只是一個(gè)變量曹质，不會(huì)當(dāng)做window對(duì)象的屬性。let就說(shuō)的差不多了，下面說(shuō)下const羽德。

const###

其實(shí)const和let用法几莽，包括需要注意的一些細(xì)節(jié)都一樣比如沒(méi)有變量提升，聲明全局變量宅静，塊級(jí)作用域章蚣。但是還是有一些地方是不一樣的，最大的一個(gè)不同點(diǎn)就是姨夹，const申明的變量纤垂，是不可變的，變了就報(bào)錯(cuò)磷账，具體例子如下：

const a =10;
a = 20;//報(bào)錯(cuò)峭沦，語(yǔ)法錯(cuò)誤，不能改變一個(gè)不變的值

當(dāng)然逃糟，如果你以為這就是const的全部吼鱼，那就不太好了，回到開(kāi)頭提出的問(wèn)題绰咽，如果用const申明的是一個(gè)對(duì)象呢菇肃？

const a = {
    value:10
}
a.value = 20;
a;//a{value:20}

修改了，沒(méi)有報(bào)錯(cuò)剃诅∠锼停可能你有些動(dòng)搖了，那么看下一個(gè)例子：

const a = {
    value:10
}
a = {
    value:20//報(bào)錯(cuò)矛辕，語(yǔ)法錯(cuò)誤，不能改變一個(gè)不變的值
}

結(jié)論付魔，const只會(huì)鎖定變量的地址聊品，而不會(huì)鎖定變量的屬性，這個(gè)和Object.freeze()几苍，還是有很大的區(qū)別的翻屈。

總結(jié)###

• var沒(méi)有想象中的那么好，盡量使用let妻坝，const代替伸眶。
• var申明的全局變量，除非你真的是想給window對(duì)象加屬性刽宪，不然就用let厘贼，const代替。
• let圣拄，const沒(méi)有變量提升嘴秸，注意暫時(shí)性死區(qū)。
• const并不是真正的鎖定變量的所有，而只是鎖定這個(gè)變量的地址而已岳掐，所以這個(gè)變量的屬性是可以修改的凭疮。
• 盡量都是用const，除非你確定你申明的是一個(gè)變量（會(huì)變的值）串述。