ES6之聲明

作者原文：http://hawkzz.com/blog/blog/1515483679215

Var聲明和提升機制

在函數作用域和全局作用域中通過關鍵字var聲明變數，無論是在哪裡聲明，都會被當成在當前作用頂部聲明的變數，這就是我們常說的變數提升機制。廢話不多說，來看一個例子：

function getValue(flag){

     if(flag){
        var value = 'abc';
        retun value;
     }else{
        console.log(value);//undefined;
        return null;
     }
}

由上面的例子可以看出，變數value由於變數提升機制，在哪裡都可以被訪問到，其實上面代被解析成一下代碼：

function getValue(flag){
    var value;//變數提升
    
    if(flag){
        value = 'abc';
        retun value;
    }else{
        console.log(value);//undefined;
        return null;
    }
}

塊級聲明

塊級聲明用於聲明在指定塊的作用域之外無法訪問的變數；塊級作用域存在於：

• 函數內部
• 代碼塊{}中

let聲明

ES6新增let聲明，用法類似var。用let代替var來聲明變數，可以將變數的作用域限制在當前代碼塊中。

var聲明變數：

var  a = 10;

{
    var a = 20;
}

console.log(a);//20

let聲明變數：

let a = 10;

{
    let a = 20;
}
console.log(a);//10

let也沒有變數提升機制，用let聲明的變數不會在被到作用域頂部；

function getValue(flag){

    if(flag){
        let value = 'abc';
        return value;
    }else{
        console.log(value);//error:value is not defined
        return null;
    }
}

運行上面代碼，當flag為false時，會報錯；

const聲明

用const聲明一個只讀的常量，一旦聲明，其值就不可以更改，並且聲明時必須初始化，否則會報錯；

const a ;//Module build failed: SyntaxError

const PI = 3.1415926;
console.log(PI);//3.1415926

PI = 3;//TypeError

const和let一樣都是塊級聲明，所以只在當前作用域內有用，一旦離開就會報錯；

{
   const a = 'abc';
}
console.log(a);//error

const的本質

實際上const聲明保證的不是值的不改的，而是變數指向的記憶體地址不得改動。對於簡單類型的數據（Number，String，Boolean），變數保存的就是其記憶體地址，改變其值就是改變其記憶體地址；對於複合類型的數據（Array，Object），變數保持的不是其記憶體地址，而是指向
記憶體地址的指針，所以複合類型的數據只要保證指針不改動就行，至於裡面的數據結構改變，這個就不能控制了；

const obj = {};
obj.name = 'Jon';
obj.age = 23;

console.log(obj);//{name: "Jon", age: 23}

obj = {name:1};//error

從上面代碼中，常量obj是個對象，所以保存的是一個指針，當增加屬性和刪除屬性時，由於保存的指針沒有變，所以不會保存；當給其重新賦值的時候，改變其指針，所以報錯；

禁止重覆聲明

如果在同一作用域內，已經存在一個變數，再使用let或const聲明這個變數時會報錯；

{
    var a = 10;
    let a = 10;//報錯
}

在上面例子中，變數a在代碼塊中被聲明瞭兩次，第一次被var聲明，沒有任何問題，當第二次被let聲明時，報錯；因為已經存在變數a了；

 let a = 10;
    
 {
     let a = 20;//不報錯
 }
  

上面的例子中，變數a被聲明兩次沒有報錯，因為這次聲明不在同一作用域；

暫時性死區（TDZ）

如果區塊中存在let和const命令，這個區塊對這些命令聲明的變數，從一開始就形成了封閉作用域，且let和const聲明的變數不會被提升到作用域的頂部，如果在聲明之前使用這些變數，就會報錯。

if(true){
    console.log(tmp);//報錯
    
    let tmp = 'abc';
}

由於console.log(tmp);語句會拋出錯誤，因此用let定義並初始化變數的語句不會執行，此時就會稱為：“暫時性死區”（簡稱：TDZ）；所以在使用變數之前，都需要聲明變數；

全局作用域綁定

let和const與var的另一個區別是它們在全局作用域中的行為。當var被用於全局作用域時，它會創建一個新的全局變數作為全局對象的屬性；

var str = 'Hello';
console.log(window.str);//Hello

如果在全局作用域中使用let或const，會在全局作用域下創建一個新的綁定，但該綁定不會添加為全局對象的屬性；

let str = 'Hello';
console.log(str);//Hello
console.log(window.str);//undefined