摘要：變量聲明結論存在變量提升，可重復多次聲明同名變量。和的出現，很好地把中定義變量的給埋了，解決了定義同名變量導致變量間相互污染的問題，保證了同一塊級作用域下，變量名的唯一性。中規定，函數本身的作用域在其所在的塊級作用域當中。

萬丈高樓平地起，欲練此功，必先打好基本功: )。

ES6已經融入到了我們的日常開發當中，甚至一些ES7的特性也已經在普遍使用，但由于瀏覽器的支持問題，ES6的代碼在大多數情況下，還是需要編譯成ES5才能正常地在各瀏覽器上正常運行。
ES6支持6中形式的變量命名方式：var、let、const、function、class、function，本文主要討論的是var、let、const。class和function會在之后專門討論。

在ES5里面，我們要聲明一個變量，會通過三種命令方式來實現，var、隱式聲明、function；

var a = "test";     //var定義一個變量a，并賦值字符串"test";
b = "test2";        //隱式聲明，在堆變量b賦值字符串"test2"前，未以任何方式聲明變量b，此時b為全局變量
function f() {
    cosole.log("haha");
}

隱式聲明聲明變量是一個很不好的行為，隱式聲明的變量類似于通過var定義一個變量，且變量的作用域直接指向window對象，這會導致變量容易被錯誤引用或修改

function f() {
    var fn = function() {
        (function() {
            b = "隱式聲明的變量b";
        })();
    }
    fn();
}
f();
b;          //"隱式聲明的變量b"
window.b;   //"隱式聲明的變量b"

而在ES6中，變量聲明增加了let和const兩種形式，先看以下例子：

console.log(a);     //無報錯，輸出undefined
var a = "test";
var a = "var again";

通過var聲明的變量存在變量提升一說，同一變量名在相同作用域下能重復定義，上述代碼執行時會以以下情形執行：先定義一個變量var a,console.log(a),a = "test"；

console.log(son);     //報錯 Uncaught ReferenceError: son is not defined
let son = "James Bond";

let聲明變量不存在變量提升，因此在son被定義前使用son的話，會報錯

const name;            //報錯 Uncaught SyntaxError: Missing initializer in const declaration
let education;              //正常執行
console.log(education);     //undefined

const name1 = "human";
name1 = "cat";         //報錯 Uncaught TypeError: Assignment to constant variable.

通過const定義的name、obj是一個常量，在聲明時必須對其進行賦值，且賦值后不能進行二次賦值，而let聲明的變量在聲明時可不賦值，后面再賦值，此時默認值為undefined。

const obj = {};
obj;                //{}
obj.a = "1";
obj;                //{a:1}

const 定義的obj在常量中存儲的是obj對象在棧里指向堆的地址，該指向地址不可改變，而在堆地址里面存放的數據不被約束，是可變的。若希望禁止變更obj及其內部屬性，Object提供了freeze方法，如下函數能更好的遞歸凍結Object對象

const freezeObj = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach((item) => {
        if(type of(item) === "object") freezeObj(item);
    });
}

let fruit = "orange";
var fruit = "apple";    //報錯 Uncaught SyntaxError: Identifier "fruit" has already been declared

通過let定義的變量在同一作用域下不允許被重復定義，否則會報錯，const也是如此

var test = "test",
    test1 = "test1";
{
    test = "new test";      //Uncaught ReferenceError: test is not defined
    test1 = "new test1";    //Uncaught ReferenceError: test1 is not defined
    let test;
    const test1 = "new test1";
}

通過let、const聲明的變量會存在 __暫時性死區__，即：在聲明該變量的作用域內，變量已經被綁定在該作用域之中，忽略外界存在的同名變量，在該作用域下，該變量在變量聲明之前都不能被使用。

var：

存在變量提升，可重復多次聲明同名變量。

let：

不存在變量提升，必須先定義再使用，否則報錯;

同一作用域下不可重復定義同名變量，否則報錯;

在代碼塊內，通過let聲明的變量，盡管代碼塊外層有同名變量，代碼塊內部在該變量聲明前都不能使用該變量，否則報錯。

const：

不存在變量提升,必須先定義再使用，否則報錯；

同一作用域下不可重復定義同名變量，否則報錯；

創建變量的同時必須對其賦值，且賦值后不能直接通過=直接替換整個值否則報錯；

在代碼塊內，通過const聲明的變量，盡管代碼塊外層有同名變量，代碼塊內部在該變量聲明前都不能使用該變量，否則報錯。

let 和 const的出現，很好地把ES5中var定義變量的Bug給埋了，解決了定義同名變量導致變量間相互污染的問題，保證了同一塊級作用域下，變量名的唯一性。同時const定義常量能更直觀地明白常量的意義及其不可修改性。

ES6新增的變量聲明命令存在塊級作用域

{
    var a = "test";
    let b = "test1";
}
console.log(a);     //test
console.log(b);     //Uncaught ReferenceError: b is not defined

這便是塊級作用域最基本的示例，通過let、const聲明的變量僅能在其代碼塊內被使用，該代碼塊內部即是一個塊級作用域

var a = "test";
function f(){
    console.log(a);
    if(true) {
        var a = "test1";
    }
    console.log(a);
}
f();        //undefinded   test1

這個例子輸出的結果是undefined，原因在于，在f()中，不論if語句判斷是否通過，if內部的var a都被變量提升，且變量a均通過var命令聲明，內部變量a覆蓋了外部變量a；

換個寫法再來一遍

let a = "test";
function f(){
    console.log(a);
    if(true) {
        let a = "test1";
    }
    console.log(a);
}
f();        //test   test

比對一下兩段代碼的執行情況：
看看該代碼的實際執行情況：

var a                               let a
a = "test"                          a = "test"
function f                          function f
f() = {}                            f() = {}
f()                                 f()
var a                               console.log(a);
console.log(a)                      if(true)
if(true)                            let a        //此處的a是另一個a，可以理解為_a,且_a的作用范圍僅在if語句內
a = "test1"                         a = "test1";    //類似于_a = "test1"
console.log(a)                      console.log(a)  //類似于console.log(_a)

從上面的比對可以看出，通過let聲明的變量a，不會被變量提升，且具有塊級作用域，不會影響到上層作用域的a變量

再來一個示例：

for(var i=0;i<10;i++){
    console.log("for里面的i："+i);          // 1、2、3......10
}
console.log(i)；            //10

這里定義的循環計數變量i，原本只是想在循環內使用，但由于使用了var聲明，因此不存在塊級作用域，導致for循環外也能獲取到了i的值。

ES6中規定，函數本身的作用域在其所在的塊級作用域當中。

function fn() {
    console.log("outside console");
}
(function() {
    if(false) {
        function fn() {
            console.log("inside console");
        }
    }
    fn();
}());

上述代碼中，fn()執行結果會報錯fn is not a function，因為在fn執行的環境中存在function fn的聲明，聲明被提前，導致fn被提前定義，但沒有被賦值為function。

ES6的函數自執行代碼變得精簡。

//從
(function() {
    console.log("test");
})();

//變為

{
    console.log("test");
}

通過使用let const，讓變量存在了塊級作用域，很好地劃分變量間的作用范圍，避免了以往同名變量相互污染問題；外層變量無法直接讀取內層變量，對內層變量具有更好的保密性，內外層代碼獨立執行，相互間不影響；精簡了函數自執行代碼

以上。

文章觀點內容如有錯誤歡迎指出交流，相互進步