javascript精雕細琢（一）：var let const function宣告的區別
目錄
- 引言
- 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迴圈以及其他一些地方上存在的區別，涉及實際使用。以後會單獨再開一篇進行講解。
以上，如有錯誤或是紕漏，歡迎批評指正~