一起來了解JavaScript的變量作用域

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

1.變量作用域的分析

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

vara=1;

varb=2;

functionpomp(){

alert(a);

alert(b);

b=2;

alert(b);

vara=3;

alert(a);

pomp();

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

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

在這些局部里，局部變量的優(yōu)先級是大于全局變量的，這是什么意思呢？我們再用一個小demo來解釋一下：

vara=1

functionpomp(){

vara=2

alert(a)

pomp()

alert(a)

也就是說，我們在局部和全局都有一個變量a，那么在局部，腳本解釋器會優(yōu)先從最近的位置開始尋找，最近的位置，當然會有局部大于全局的效果，于是第一個彈窗彈出的是2，第二個才是1。

介紹完了局部變量和全局變量，我們再回到最開始的那個demo的問題：

vara=1;

varb=2;

functionpomp(){

alert(a);

alert(b);

b=2;

alert(b);

vara=3;

alert(a);

pomp();

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

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

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

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

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

當使用var關鍵字時，在局部或者全局中的任何位置，當某個變量被聲明后，無論是之前的哪個地方，都可以使用這個變量，只是會顯示undefined。

2.var關鍵字

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

alert(a)

vara=3

alert(a)

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

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

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

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

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

3.let和const關鍵字

首先，我們還是先來一個demo：

alert(a)

leta=3

alert(a)

哎嘿，大家點擊之后，是不是啥也沒有啊，這可不是我在惡作劇，而是確實是什么也沒有，原因是，它報錯了(hahaha)：

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

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

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

最后，我們簡單介紹一下const，const在let的基礎上，多了一個唯一性的概念：

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

constpi=3.14

conste=2.7

const的作用域與let相同！

4.var、let和const的對比

一口氣看完了三個關鍵字，我們最后再簡單梳理一下吧，在梳理之前，先上一個demo：

functiondemo(){

for(vari=1;ii++){

alert(i)

for(letj=1;jj++){

alert(j)

demo()

大家看到這里似乎又有點小疑惑，因為我們知道for循環(huán)是一個局部，那么局部的變量i和j，在for循環(huán)的外面，理應不存在才對，但是很顯然，我們?nèi)绻藢α藭l(fā)現(xiàn)，彈窗彈出了一個10，也就是說i此時值仍然保留為10，而j確實和我們想的一樣，是不存在的，它也確實報錯了：

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

關鍵字作用域值的特點var變量在局部/全局任何地方被聲明，在對應的局部/全局的其