目錄

• 引言
• var
• let
• const
• function
• 總結

引言

　　在學習javascript的過程中，變數是無時無刻不在使用的。那麼相對應的，變數宣告方法也如是。變數是由自己決定，但變數宣告方法是早已經定義好的。那麼在使用變數之前，瞭解變數宣告方法，就變得尤為重要。在ES6推出之前，最常用的宣告變數方法就是var。但是由於var自身的缺陷，ES6推出了let和const替代var。雖然修正了var的缺陷，但不能改變的，是之前已經用var寫了多少年的專案，這些專案是無法隨著var的被取代而輕易更改的。所以仍存在著使用var的公司和專案，這也使得了解var、let、const的區別變得有必要。

　　在接下來的說明中，為了理解起來一目瞭然，使用了圖片說明的方式，搭配適當的文字解釋，並沒有貼上程式碼（因為程式碼都及其簡單）。我希望讀完這篇文章後，能達到理解記憶的效果。

一、var

在說明var並看圖之前，我們先統一思路，將變數的宣告及使用過程分為：*****建立→初始化→賦值→修改*****四步。

首先，來看var的宣告及使用：

由上圖可以看出，var在它的執行環境中的宣告及操作過程為：

　　　　（ 建立→初始化 ）→賦值→修改

1、隱藏步驟：在環境最頂端，建立變數，並初始化為undefined—— 變數提升；

2、為變數賦值；

　3、對變數進行操作，可以在後續操作中對變數值進行修改；

　　通過console.log的列印結果，我們可以清晰的認識到一點——var的初始化與賦值是分離的，而且初始化的過程優先於執行環境中的所有操作。這就是為什麼在var宣告賦值前console.log變數，會打印出undefined，而不是報錯的原因。

　　var宣告的初始化先於賦值的現象，就叫做*****變數提升*****。

　　下面再來看第二張圖，說明var的另一個缺陷：

　　由上圖可以看出，var宣告一個變數時，可以無限次的以同一個變數名不斷的 建立→初始化→賦值，這跟直接修改變數值的結果是一樣的。但是實際操作中不會有人通過這種方式對變數執行操作，而且這種設計缺陷著實讓人無法忍受……。

二、let

　　上圖：

　　同樣，先分析過程：

　　　　（ 建立→初始化→賦值 ）→修改

1、不存在隱藏步驟；隱藏步驟在環境最頂端，建立變數，並初始化為undefined—— 變數提升；

2、建立變數、初始化並賦值；

　3、對變數進行操作，可以在後續操作中對變數值進行修改；

　　通過上圖，我們可以看出let宣告變數時，（ 建立→初始化→賦值 ）是在一步完成的。不存在變數提升的現象。所以在let宣告前console.log(a)，報錯***a is not defined***，因為此時a還沒有被建立。

　　接下來再看第二張圖

　　上圖說明了let區別於var的另一個特性——變數的唯一性。同一個變數名，不能在let中重複使用，所以執行上圖操作的結果，就是報錯***Identifier 'a' has already been declared***；

三、const

　　再上圖：

　　分析過程：

　　　　（ 建立→初始化→賦值 ）→修改

1、不存在隱藏步驟；隱藏步驟在環境最頂端，建立變數，並初始化為undefined—— 變數提升；

2、建立變數、初始化並賦值。必須賦值，不賦值會報錯；

　3、對變數進行操作，可以在後續操作中對變數值進行修改，不可以對變數進行修改，但是可以對變數的屬性進行修改；

為了說明const的特性，特意聲明瞭一個物件。在理解了var和let的過程之後，再來看const的整個過程，會發現在（ 建立→初始化→賦值 ）的過程中，const和let是沒有區別的。唯一的區別在於→修改。如果執行了圖片中的程式碼，在***a = 1***那步會報錯*** Assignment to constant variable***。其中的constant就是const的英文全拼，它的意思的***不變的、恆定的、恆量***。從字面上就能理解，通過const宣告的變數，是一個恆定值，即無法更改的值。所以當通過***a = 1***試圖修改a的值時，報錯。

雖然a本身的值無法修改，但是a內的屬性是可以修改的。從圖上最後一步可以看出。a.name的值成功修改為"Jack"。這就是const 的第二個特性。

　　同let一樣的，const的第三個特性也是變數的唯一性，不再過多闡述。

四、function

　　繼續上圖：

　　分析過程：

　　　　（ 建立→初始化→賦值 ）→執行/修改

1、隱藏步驟；隱藏步驟在環境最頂端，建立函式，初始化並賦值為函式定義；

2、執行函式，無論函式在何位置，只要可用，就可以呼叫；

　　function是專門用於函式宣告的方法，由於函式的複雜性，以及利用性。function宣告的函式，會在整個環境變數最頂端完成建立、初始化、賦值三位一體的操作。這樣一來，不管在何處聲明瞭函式，可以在任何地方呼叫函式方法。這是比較合乎常理的性質。

　　function另外一個性質，同var一樣，它也可以對同一變數重複宣告，而且後邊的函式定義會覆蓋前邊的函式定義，如下圖所示：

　　結果列印1，說明前邊宣告的函式方法被後邊所覆蓋。

五、總結

　　綜上所述，可以總結為如下幾點：

　　　　1、var與let、const的區別在於變數提升，以及變數的唯一性；

　　　　2、const與let的區別，除了變數值不能修改，其他性質一樣；

　　　　3、function由於其自身的需要，建立→初始化→賦值 三位一體，在環境最頂端完成；也正因為這種性質，函式可以在任何位置被呼叫；

　　　　4、如果可以，儘量使用let、const代替var；

　　本文僅僅簡單羅列了在函式宣告及操作方面，var、let、const、function的區別，意在為初學者理清概念偏差，少走彎路，並通過理解學習，早日跨入JS門檻。至於在for迴圈以及其他一些地方上存在的區別，涉及實際使用。以後會單獨再開一篇進行講解。

　　以上，如有錯誤或是紕漏，歡迎批評指正~