第一起來了解JavaScript的變量作用域目錄1.變量作用域的分析2.var關(guān)鍵字3.let和const關(guān)鍵字4.var、let和const的對(duì)比總結(jié)

1.變量作用域的分析

首先，我們先研究一下JavaScript的變量作用域，研究作用域，我們不按照常規(guī)的文章那樣解釋概念，而是先給一個(gè)小demo，吊一下大家的胃口：

vara=1;

varb=2;

functionpomp(){

alert(a);

alert(b);

b=2;

alert(b);

vara=3;

alert(a);

pomp();

如果你的答案是對(duì)的，那么你對(duì)JavaScript的作用域的理解已經(jīng)是中等偏上了，可能有一些復(fù)雜的作用域你沒有掌握，但是簡(jiǎn)單的開發(fā)已經(jīng)沒有問題了；如果你不知道答案，那么下面我就以這個(gè)例子為引，介紹一下JavaScript的變量作用域問題。

首先，如果有編程基礎(chǔ)的同學(xué)，一定知道對(duì)于任何的編程語言，都有局部變量和全局變量的概念：全局變量的作用范圍是全局的；而局部變量往往在一個(gè)部分被定義和使用，在這個(gè)部分之外，它的空間就會(huì)被回收，我們就無法再使用它。常見的局部變量出現(xiàn)的地方有：for循環(huán)、函數(shù)體、代碼塊。

在這些局部里，局部變量的優(yōu)先級(jí)是大于全局變量的，這是什么意思呢？我們?cè)儆靡粋€(gè)小demo來解釋一下：

vara=1

functionpomp(){

vara=2

alert(a)

pomp()

alert(a)

也就是說，我們?cè)诰植亢腿侄加幸粋€(gè)變量a，那么在局部，腳本解釋器會(huì)優(yōu)先從最近的位置開始尋找，最近的位置，當(dāng)然會(huì)有局部大于全局的效果，于是第一個(gè)彈窗彈出的是2，第二個(gè)才是1。

介紹完了局部變量和全局變量，我們?cè)倩氐阶铋_始的那個(gè)demo的問題：

vara=1;

varb=2;

functionpomp(){

alert(a);

alert(b);

b=2;

alert(b);

vara=3;

alert(a);

pomp();

顯然，這里的問題是，我們明明已經(jīng)給a聲明為全局變量，并同時(shí)給a賦值了，那為什么會(huì)打印a為undefined呢？這就是JavaScript的另一個(gè)特點(diǎn)，就是解釋器在一行一行解釋代碼之前，會(huì)給變量劃好它們的作用域：

最開始，a和b都被聲明并定義為全局變量，a有值1，b有值2；此時(shí)，我們定義了一個(gè)函數(shù)pomp(),在函數(shù)內(nèi)部，我們又創(chuàng)建了一個(gè)局部變量a，這時(shí)候，按照剛才的分析，此時(shí)離得最近的其實(shí)應(yīng)該是局部變量a，這就解釋了為什么第一次alert(a)不是彈出1，但是還是沒有解釋undefined。

undefined的原因是這樣的：在解釋器解釋代碼之前，按照其他編程語言的叫法，我們稱這個(gè)時(shí)期是預(yù)編譯時(shí)期，在預(yù)編譯時(shí)期，由于函數(shù)體內(nèi)也聲明和定義了變量a，于是自然地函數(shù)體內(nèi)的a被劃歸到了局部變量a，即我們可以認(rèn)為已經(jīng)執(zhí)行了一句：vara，但是由于這是預(yù)編譯時(shí)期，并沒有執(zhí)行vara=3，因此此時(shí)我們可以理解為，只是執(zhí)行了vara，而a=3是在后面才會(huì)執(zhí)行，因此這是undefined的原因。

最后針對(duì)第一開始的demo做一個(gè)圖片，幫助大家理解JavaScript變量作用域：

并附帶一句總結(jié)：

當(dāng)使用var關(guān)鍵字時(shí)，在局部或者全局中的任何位置，當(dāng)某個(gè)變量被聲明后，無論是之前的哪個(gè)地方，都可以使用這個(gè)變量，只是會(huì)顯示undefined。

2.var關(guān)鍵字

最初的JavaScript，只有var這個(gè)關(guān)鍵字，因此上面的作用域講解，說白了是針對(duì)的var關(guān)鍵字，那么對(duì)于var關(guān)鍵字，這里就不再多做贅述，而是給一個(gè)小demo理解一下：

alert(a)

vara=3

alert(a)

不過避免一些朋友從這里才開始看起，我還是再復(fù)述一下：

var關(guān)鍵字聲明的變量，只要在局部/全局的任何一個(gè)地方被聲明，那么在其他的地方，即使沒有被聲明，由于在預(yù)編譯階段該變量已經(jīng)被聲明，于是它也是存在的，只是會(huì)顯示undefined，也就是未定義，而后當(dāng)執(zhí)行到vara=3，它被定義了一個(gè)值3。

順便簡(jiǎn)單嘮一下變量的聲明與定義的區(qū)別：

vara；這句話叫聲明變量aa=3；這句話叫定義變量avara=3；這句話叫聲明變量a，并給a定義為3

講完了var，其實(shí)作用域的難點(diǎn)也基本上結(jié)束了，但是由于是一篇完整的文章，下面對(duì)兩種新的JavaScript變量聲明關(guān)鍵字進(jìn)行介紹：let和const，它們的作用域與var略有不同。

3.let和const關(guān)鍵字

首先，我們還是先來一個(gè)demo：

alert(a)

leta=3

alert(a)

哎嘿，大家點(diǎn)擊之后，是不是啥也沒有啊，這可不是我在惡作劇，而是確實(shí)是什么也沒有，原因是，它報(bào)錯(cuò)了(hahaha)：

好家伙，同樣的寫法，為啥var不報(bào)錯(cuò)，let就報(bào)錯(cuò)了呢？(注意，這里用const是一樣的，const和let的作用域是相同的，也即用const一樣會(huì)報(bào)錯(cuò)！)

原因是，大家苦var久矣，這個(gè)let關(guān)鍵字，就是更符合我們的思維邏輯的一種變量的聲明方式，在let的作用域中：

一個(gè)變量只會(huì)在它被聲明之后才可以使用，而不是像var一樣，在任何地方只要有聲明，那么在前面的地方也可以用！

最后，我們簡(jiǎn)單介紹一下const，const在let的基礎(chǔ)上，多了一個(gè)唯一性的概念：

const變量一經(jīng)定義，就不能再修改它的值了，適合定義一些特定的常量，例如：

constpi=3.14

conste=2.7

const的作用域與let相同！

4.var、let和const的對(duì)比

一口氣看完了三個(gè)關(guān)鍵字，我們最后再簡(jiǎn)單梳理一下吧，在梳理之前，先上一個(gè)demo：

functiondemo(){

for(vari=1;ii++){

alert(i)

for(letj=1;jj++){

alert(j)

demo()

大家看到這里似乎又有點(diǎn)小疑惑，因?yàn)槲覀冎纅or循環(huán)是一個(gè)局部，那么局部的變量i和j，在for循環(huán)的外面，理應(yīng)不存在才對(duì)，但是很顯然，我們?nèi)绻藢?duì)了會(huì)發(fā)現(xiàn)，彈窗彈出了一個(gè)10，也就是說i此時(shí)值仍然保留為10，而j確實(shí)和我們想的一樣，是不存在的，它也確實(shí)報(bào)錯(cuò)了：

那為啥會(huì)出現(xiàn)這種情況呢？原因是var關(guān)鍵字聲明的局部變量，會(huì)在整個(gè)大的局部退出時(shí)，才會(huì)回收內(nèi)存，也就是說for循環(huán)雖然也是一個(gè)局部，但是這個(gè)局部是屬于function這個(gè)大局部，因此才會(huì)出現(xiàn)仍然存在i，但是let顯然又一次達(dá)到了我們的預(yù)期！

關(guān)鍵字作用域值的特點(diǎn)var變量在局部/全局任何地方被聲明，在對(duì)應(yīng)的局部/全局的其