javascript
javascript中var、let、const声明的区别
我在上一篇文章javascript中詞法環(huán)境、領(lǐng)域、執(zhí)行上下文以及作業(yè)詳解中的最后稍微提到了有關(guān)var、let、const聲明的區(qū)別，在本篇中我會(huì)重點(diǎn)來(lái)分析它們之間到底有什么不同。
提到var、let、const中的區(qū)別很多人一下子就想到了，var聲明的變量是全局或者整個(gè)函數(shù)塊的而let、const聲明的變量是塊級(jí)的變量。var聲明的變量存在變量提升，let、const聲明的變量不存在變量提升。let聲明的變量允許重新賦值，const聲明的變量不允許重新賦值。那么它們之間真的只有這么一點(diǎn)區(qū)別嗎，我們先來(lái)看下面一個(gè)例子：
注：本篇文章中的所有例子都以最新版chrome瀏覽器為標(biāo)準(zhǔn)（低版本瀏覽器實(shí)現(xiàn)會(huì)有區(qū)別）。
//我們看一下這三句話(huà)，你認(rèn)為會(huì)發(fā)生什么 let let = 1; console.log(let); // const let = 1; console.log(let); // var let = 1; console.log(let);很多人會(huì)認(rèn)為，let是關(guān)鍵字，上面這三句聲明都會(huì)報(bào)錯(cuò)?？墒聦?shí)真的是這樣嗎？不是。let、const的聲明會(huì)報(bào)錯(cuò)，但是var聲明被認(rèn)為是規(guī)范的,更重要的是let、const聲明報(bào)錯(cuò)的原因也不是因?yàn)閘et是關(guān)鍵詞而是由于ECMAScript語(yǔ)言規(guī)范中規(guī)定了當(dāng)用let、const聲明時(shí)如果標(biāo)識(shí)符是let則報(bào)錯(cuò)。
該代碼是運(yùn)行在非嚴(yán)格模式下的，嚴(yán)格模式則報(bào)錯(cuò)，值得注意的是嚴(yán)格模式下上面三句話(huà)都是因?yàn)闃?biāo)識(shí)符let是保留字而報(bào)錯(cuò)的。有興趣可以在嚴(yán)格模式和非嚴(yán)格模式下測(cè)試let let = 1;報(bào)錯(cuò)原因是不同的。
下面的所有代碼都在非嚴(yán)格模式下進(jìn)行，如果是嚴(yán)格模式我會(huì)明確指出。
那么上面三句話(huà)中的標(biāo)識(shí)符let改為const會(huì)怎么樣？無(wú)論是嚴(yán)格模式還是非嚴(yán)格模式都報(bào)錯(cuò)，錯(cuò)誤原因是因?yàn)閏onst是關(guān)鍵字，這時(shí)候問(wèn)題又來(lái)了，為什么標(biāo)識(shí)符let和const的行為會(huì)不同呢？這個(gè)鍋說(shuō)到底還是得ES5規(guī)范背，在ES5規(guī)范中const被認(rèn)為是未來(lái)保留字（FutureReservedWords）而let只有在嚴(yán)格模式下才被認(rèn)為是未來(lái)保留字，這導(dǎo)致var可以聲明let卻不能聲明const，那到了ES6時(shí)代為什么不改呢？哎！不是不改而是心有力而余不足啊，鬼知道在ES6時(shí)代之前有多少代碼中出現(xiàn)過(guò)var let這個(gè)聲明啊，這要是改了得有多少網(wǎng)站得炸啊。
基于上面的原因，你看到下面的代碼時(shí)不要驚訝：
var let = 1; console.log(let); //1 let a = 2; console.log(a); //2 //看著怪異但是完全可以工作，不會(huì)有任何錯(cuò)誤看完上面一個(gè)不同點(diǎn)，我們?cè)倏聪旅孢@個(gè)例子：
var a; console.log(a); //undefined // let a; console.log(a); //undefined // const a; console.log(a); //?我們都知道如果var和let只聲明變量而不賦值，那么默認(rèn)賦值undefined，那么const會(huì)怎樣呢？
你在Chrome控制臺(tái)上試一下就知道了，語(yǔ)法錯(cuò)誤缺少初始化，ES6規(guī)范指出const聲明的標(biāo)識(shí)符一定要初始化賦值,這不是運(yùn)行時(shí)錯(cuò)誤，這是個(gè)早期錯(cuò)誤，編譯器在執(zhí)行腳本之前會(huì)檢測(cè)早期錯(cuò)誤。
我們接著看下一個(gè)問(wèn)題：
let a = 1; let a = 2;var可以重復(fù)聲明變量，那么let和const可以嗎？答案是不可以。你可以認(rèn)為let和const聲明的變量名稱(chēng)在該作用域內(nèi)是唯一的，不能重復(fù)聲明。那如果用var可以覆蓋let聲明的變量嗎？答案是不能。不管你是let或const先聲明變量var后面重復(fù)聲明，還是var先聲明變量let或const后聲明都會(huì)報(bào)錯(cuò)。這個(gè)錯(cuò)誤是一個(gè)早期錯(cuò)誤。
注意：let/const跨腳本聲明重復(fù)變量也會(huì)報(bào)錯(cuò)。但這個(gè)時(shí)候的錯(cuò)誤被認(rèn)為是運(yùn)行時(shí)錯(cuò)誤，不是早期錯(cuò)誤。上面所指的let/const聲明都指在同一作用域下。
塊（Block）
上面列出了var、let、const靜態(tài)語(yǔ)義上的區(qū)別。在該小節(jié)中我會(huì)講述在javascript內(nèi)部它們之間的不同，不過(guò)在此我們先要了解（塊）Block，可以說(shuō)let、const是因?yàn)锽lock存在的。
不過(guò)提到Block之前我們需要花幾分鐘了解幾個(gè)名詞：
我拿個(gè)例子簡(jiǎn)單說(shuō)明一下：
//全局聲明 var a=1; let b=1; const c=1;function foo(){}; class Foo{}; {//塊級(jí)聲明var ba=1;let bb=1;const bc=1;class BFoo{};function bfoo(){} }注：? ?結(jié)構(gòu)是ECMAScript中的一個(gè)規(guī)范類(lèi)型，表示一個(gè)List，具體你可以認(rèn)為它是一個(gè)類(lèi)數(shù)組（當(dāng)然實(shí)際肯定不是，只是方便理解）
有沒(méi)有看到怪異的地方？function聲明在頂級(jí)作用域（TopLevel）中被視為var聲明，而不在頂級(jí)作用域也就是Block或catch塊中被認(rèn)為是詞法聲明，這就導(dǎo)致了一些有趣的事情。
Block只有前四個(gè)列表，函數(shù)（function）和腳本（script）只有后四個(gè)列表（其實(shí)函數(shù)和腳本也只有前四個(gè)，不過(guò)前四個(gè)列表的值取的是后四個(gè)列表的值）。Block雖然有自己的作用域但是它和函數(shù)有著本質(zhì)上的區(qū)別。函數(shù)和腳本你可以看成是相互獨(dú)立的而B(niǎo)lock是屬于function和script的一部分。具體就是Block中的var聲明同時(shí)也被認(rèn)為是頂級(jí)聲明，不管你嵌了多少層塊在里面都不會(huì)變,因?yàn)锽lock沒(méi)有頂級(jí)作用域。
理解了上面的8個(gè)名稱(chēng)，我們?cè)賮?lái)看看Block中的聲明與function和script中有何不同：
規(guī)則1很正常，LexicallyDeclaredNames這個(gè)列表里不能有重復(fù)項(xiàng)，即不能重復(fù)聲明。
規(guī)則2這就很有意思了，我們上面說(shuō)到了在Block中function聲明屬于詞法聲明，于是你會(huì)在Block中看到：
補(bǔ)充規(guī)則1中function聲明
{function a(){}; function a(){}; //it's ok,no syntax Error } //----------------------- 'use strict'; {function a(){}; function a(){}; //error, syntax Error redeclaration a; }這里我不得不吐槽一下了，就因?yàn)樵诜菄?yán)格模式下Block中的function可以重復(fù)聲明害我以為規(guī)范1我理解錯(cuò)了，導(dǎo)致我把文檔中有關(guān)Block規(guī)范說(shuō)明部分翻來(lái)覆去看了好幾遍，最后我才在規(guī)范文檔的附錄中找到原因：為了實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽器的兼容性，允許在非嚴(yán)格模式下的Block中的function可以重復(fù)聲明。
這里有個(gè)建議，最好永遠(yuǎn)不要在一個(gè)作用域內(nèi)同時(shí)使用var和let/const聲明，還有不要在Block中使用var聲明，至于Block中的function聲明，除非你確切的知道你需要這個(gè)function做什么，否則也不要在Block中使用function。Block中的function是如此的怪異。
1.非嚴(yán)格模式下，block中的function聲明的標(biāo)識(shí)符會(huì)被提到頂級(jí)作用域下，但是只提標(biāo)識(shí)符,并賦值undefined，不提函數(shù)體。你可以把它看成是一個(gè)var聲明的變量，具體如下：
console.log(foo); //undefined {function foo(){console.log(1);} } foo(); //12.非嚴(yán)格模式下，block中的function聲明的函數(shù)對(duì)象對(duì)這個(gè)block來(lái)說(shuō)形成了一個(gè)閉包，我認(rèn)為‘閉包’這個(gè)詞是最好的解釋：
var a = 'outer a'; {let a = 'inner a';function foo(){console.log(a);} } console.log(a) //outer a foo(); //inner a, not outer a3.嚴(yán)格模式下，block中的function聲明只能在block中訪(fǎng)問(wèn)到,離開(kāi)這個(gè)block無(wú)法訪(fǎng)問(wèn)：
'use strict'; console.log(foo); //Uncaught ReferenceError: foo is not defined {function foo(){console.log(1);} } foo(); //Uncaught ReferenceError: foo is not defined出現(xiàn)這種情況是因?yàn)镋S5之前，block中不能出現(xiàn)function聲明，但是不同的瀏覽器實(shí)現(xiàn)不一樣，到了現(xiàn)在只能通過(guò)瀏覽器擴(kuò)展進(jìn)行填補(bǔ)。在非嚴(yán)格模式下，編譯器進(jìn)行全局聲明實(shí)例化是也就是上篇文章中說(shuō)道的GlobalDeclarationInstantiation方法時(shí)會(huì)對(duì)block、switch中case和default語(yǔ)句中的function聲明進(jìn)行額外的操作，如果function聲明的標(biāo)識(shí)符在全局環(huán)境下沒(méi)有找打其它的詞法聲明名稱(chēng)即在TopLevelLexicallyDeclaredNames列表中不存在function聲明的標(biāo)識(shí)符，則在全局環(huán)境記錄下創(chuàng)建function綁定，但是設(shè)置的值不是聲明的函數(shù)體而是是undefined。函數(shù)中有相似的操作。
block中的一些注意點(diǎn)以及和function還有script中的區(qū)別我大致講了一下。那么block是如何做到有塊級(jí)作用域的功能的呢？
我在上一篇文章中講到了執(zhí)行上下文，提到執(zhí)行上下文是編譯器用來(lái)跟蹤代碼執(zhí)行時(shí)評(píng)估的一種規(guī)范設(shè)備，每個(gè)執(zhí)行上下文都有自己的LexicalEnvironment和VariableEnvironment組件。編譯器在評(píng)估Block做了如下操作：
我們看到了執(zhí)行block中代碼時(shí)不會(huì)新建執(zhí)行上下文，它只是改變了正在運(yùn)行的執(zhí)行上下文的LexicalEnvironment組件值，block運(yùn)行完成后又恢復(fù)成以前的LexicalEnvironment組件，這指明了block中聲明的變量只在該block中起作用，這也表示為什么block是塊級(jí)作用域。這跟函數(shù)不一樣，執(zhí)行函數(shù)時(shí)會(huì)創(chuàng)建新的執(zhí)行上下文。
我這再說(shuō)明一下，步驟3中的聲明進(jìn)行實(shí)例化指得是LexicallyScopedDeclarations列表中的聲明，block不會(huì)對(duì)其中的var聲明進(jìn)行操作。步驟5中的blockValue指得是block中最后一個(gè)語(yǔ)句執(zhí)行后的返回值。
知道了這個(gè)，我們來(lái)看個(gè)let和var在Block中的不同：
for(var i = 0;i < 10;i++){setTimeout(function(){console.log(i)}) } //輸出10個(gè)10for(let i=0;i<10;i++){setTimeout(function(){console.log(i)}) } //輸出0到9我這邊做個(gè)簡(jiǎn)單說(shuō)明：
變量提升（Hoisting）
我們都知道var和function聲明在作用域內(nèi)存在著變量提升，但是let/const或者class呢？究竟有沒(méi)有存在變量提升。這個(gè)問(wèn)題存在著爭(zhēng)議，可謂仁者見(jiàn)仁智者見(jiàn)智。
我在上篇文章中提到了全局聲明實(shí)例化和block中的block聲明實(shí)例化以及沒(méi)有提到的function聲明實(shí)例化，你會(huì)發(fā)現(xiàn)一個(gè)關(guān)鍵，就是這些操作都是在執(zhí)行代碼之前做的，全局聲明實(shí)例化在腳本執(zhí)行之前進(jìn)行，block聲明實(shí)例化在block中的代碼執(zhí)行之前進(jìn)行，包括函數(shù)也是如此。那么聲明實(shí)例化究竟是做什么的呢？
具體的操作就是把存在LexicallyScopedDeclarations、VarScopedDeclarations、TopLevelLexicallyScopedDeclarations和TopLevelVarScopedDeclarations的信息進(jìn)行操作，存到環(huán)境記錄中。這些詞都是靜態(tài)語(yǔ)義，也就在在腳本執(zhí)行之前就已經(jīng)存儲(chǔ)了。
var a = 1; let b = 1; //執(zhí)行代碼前環(huán)境記錄（Environment Record）綁定了a,b，并給a賦值為undefined，b不賦值。 //注：let、const和class只綁定（實(shí)例化）不初始化,var和function會(huì)進(jìn)行初始化，function初始化指的就是整個(gè)函數(shù)。//執(zhí)行代碼時(shí)---------------- console.log(a); //undefined 環(huán)境記錄中有a的這個(gè)綁定，并且值是undefined，所以輸出undefined var a = 1;//---------------- console.log(a); //Uncaught ReferenceError: a is not defined 環(huán)境記錄中有a的這個(gè)綁定，但是沒(méi)有值，所以error。 //可能a is not defined改為a is not initialized更能讓人容易理解。 // not defined容易和undefined混淆。 let a = 1;//一個(gè)更好的例子 var a = 1; {console.log(a); //Uncaught ReferenceError: a is not defined,not value 1;let a = 2; //let聲明的變量實(shí)際上也提升了 }正是這樣原因?qū)е隆白兞刻嵘贝嬖跔?zhēng)議，一部分人認(rèn)為let、const、class和var一樣，在一開(kāi)始就已經(jīng)提升了，所以let、const、class存在“變量提升”。有的人認(rèn)為所謂“變量提升”，是指代碼不報(bào)錯(cuò)，還能運(yùn)行，而let、const、class會(huì)出現(xiàn)錯(cuò)誤，所以不能算“變量提升”。
ECMAScript規(guī)范一直沒(méi)有給出準(zhǔn)確的說(shuō)明，甚至不同版本說(shuō)法不一樣，在最新的ES8規(guī)范中雖然沒(méi)有給出準(zhǔn)確的說(shuō)明，但是規(guī)范定義了一個(gè)HoistableDeclaration文法，該文法中包含了FunctionDeclaration、GeneratorDeclaration和AsyncFunctionDeclaration文法。HoistableDeclaration文法又與ClassDeclaration和LexicalDeclaration（let/const的語(yǔ)法規(guī)則）文法組成Declaration文法。
這里是不是可以推斷出ECMAScript規(guī)范認(rèn)為let、const和class不存在“變量提升”呢。當(dāng)然這只是我的一個(gè)推測(cè)。
結(jié)束語(yǔ)
到這里let/const和var的解釋基本就完結(jié)了。我大致的對(duì)let/const以及var做了一個(gè)區(qū)別介紹，但是還有很多小的細(xì)節(jié)不能涵蓋到，如果感興趣想了解更多的話(huà)可以查看官方文檔13.2 Block和13.3 let/const和var。
算上最開(kāi)始的javascript強(qiáng)制轉(zhuǎn)化，這是我對(duì)ES8文檔講解的第三篇文章，之后我會(huì)陸續(xù)發(fā)表一些我對(duì)ES8文檔的理解，希望能與人一起交流共進(jìn)。
總結(jié)
以上是生活随笔為你收集整理的javascript中var、let、const声明的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用钉钉接收zabbix告警
- 下一篇： 前端论坛、博客及公众号汇总