摘要：和都能夠聲明塊級(jí)作用域，用法和是類(lèi)似的，的特點(diǎn)是不會(huì)變量提升，而是被鎖在當(dāng)前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時(shí)死區(qū)臨時(shí)死區(qū)的意思是在當(dāng)前作用域的塊內(nèi)，在聲明變量前的區(qū)域叫做臨時(shí)死區(qū)。

主要知識(shí)點(diǎn)有：var變量提升、let聲明、const聲明、let和const的比較、塊級(jí)綁定的應(yīng)用場(chǎng)景

《深入理解ES6》筆記 目錄

JavaScript中，我們通常說(shuō)的作用域是函數(shù)作用域，使用var聲明的變量，無(wú)論是在代碼的哪個(gè)地方聲明的，都會(huì)提升到當(dāng)前作用域的最頂部，這種行為叫做變量提升（Hoisting）

function test() {
    var a
    //a聲明沒(méi)有賦值
    console.log("1: ", a) //undefined
    if (false) {
      a = 1
    }
    //a聲明沒(méi)有賦值
    console.log("3: ", a) //undefined
}

test()

如果a沒(méi)有聲明，那么就會(huì)報(bào)錯(cuò)，沒(méi)有聲明和聲明后沒(méi)有賦值是不一樣的，這點(diǎn)一定要區(qū)分開(kāi)，有助于我們找bug。

//b提升到函數(shù)a頂部，但不會(huì)提升到函數(shù)test。
function test() {
    function a() {
      if (false) {
        var b = 2
      }
    }
    console.log("b: ", b)
}

test() //b is not defined

let和const都能夠聲明塊級(jí)作用域，用法和var是類(lèi)似的，let的特點(diǎn)是不會(huì)變量提升，而是被鎖在當(dāng)前塊中。

function test() {
    if(true) {
      console.log(a)//TDZ，俗稱臨時(shí)死區(qū)，用來(lái)描述變量不提升的現(xiàn)象
      let a = 1
    }
}
test()  // a is not defined

function test() {
    if(true) {
      let a = 1
    }
    console.log(a)
}    
test() // a is not defined

唯一正確的使用方法：先聲明，再訪問(wèn)。

function test() {
    if(true) {
      let a = 1
      console.log(a)
    }
}
test() // 1

聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。

const type = "ACTION"

重新賦值會(huì)報(bào)錯(cuò)

const type = "ACTION"
type = 1
console.log(type) //"type" is read-only

const type = "ACTION"
let type = 1
console.log(type) //Duplicate declaration "type"

const雖然是常量，不允許修改默認(rèn)賦值，但如果定義的是對(duì)象Object，那么可以修改對(duì)象內(nèi)部的屬性值。

const type = {
  a: 1
}
type.a = 2 //沒(méi)有直接修改type的值，而是修改type.a的屬性值，這是允許的。
console.log(type) // {a: 2}

const聲明不允許修改綁定，但允許修改綁定的值

const和let的異同點(diǎn)：

相同點(diǎn)：const和let都是在當(dāng)前塊內(nèi)有效，執(zhí)行到塊外會(huì)被銷(xiāo)毀，也不存在變量提升（TDZ），不能重復(fù)聲明。

不同點(diǎn)：const不能再賦值，let聲明的變量可以重復(fù)賦值。

臨時(shí)死區(qū)的意思是在當(dāng)前作用域的塊內(nèi)，在聲明變量前的區(qū)域叫做臨時(shí)死區(qū)。

if (true) {
  //這塊區(qū)域是TDZ，訪問(wèn)a會(huì)報(bào)錯(cuò)
  let a = 1
}

訪問(wèn)TDZ中的變量會(huì)觸發(fā)運(yùn)行時(shí)錯(cuò)誤
但下面這種不會(huì)報(bào)錯(cuò)

console.log(typeof a) //undefined,因?yàn)榇藭r(shí)a不在TDZ中
if (true) {
  //這塊區(qū)域是TDZ，訪問(wèn)a會(huì)報(bào)錯(cuò)
  let a = 1
}

除了上面提到的常用聲明方式，我們還可以在循環(huán)中使用，最出名的一道面試題：循環(huán)中定時(shí)器閉包的考題

在for循環(huán)中使用var聲明的循環(huán)變量，會(huì)跳出循環(huán)體污染當(dāng)前的函數(shù)。

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) //5, 5, 5, 5, 5
  }, 0)
}
console.log(i) //5 i跳出循環(huán)體污染外部函數(shù)

//將var改成let之后
for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) // 0,1,2,3,4
  }, 0)
}
console.log(i)//i is not defined i無(wú)法污染外部函數(shù)

循環(huán)內(nèi)const聲明
在普通的for循環(huán)中使用const變量，由于const變量不可修改，因此會(huì)報(bào)錯(cuò)。而在for-in或者for-of循環(huán)中可以使用const變量。
因?yàn)檠h(huán)為每次迭代創(chuàng)建了一個(gè)新的變量綁定，而不是試圖去修改已綁定的變量的值

let arr = [1,2,3,4];
 for(const item of arr){
     console.log(item); //輸出1,2,3,4
 }

用var作用域全局作用域時(shí)聲明的全局變量會(huì)覆蓋一個(gè)已經(jīng)存在的全局屬性：

var reg = "hello";
console.log(window.reg) //"hello"

而如果在全局作用域使用let或者const聲明，當(dāng)聲明的變量本身就是全局屬性，比如closed。會(huì)創(chuàng)建一個(gè)新的綁定，但不會(huì)添加全局屬性；就是說(shuō)，用let或const不能覆蓋全局變量，只能遮蔽它；

window.closed = false
let closed = true

closed // true
window.closed // false

在實(shí)際開(kāi)發(fā)中，我們選擇使用var、let還是const，取決于我們的變量是不是需要更新，通常我們希望變量保證不被惡意修改，而使用大量的const，聲明一個(gè)對(duì)象的時(shí)候，也推薦使用const，當(dāng)你需要修改聲明的變量值時(shí)，使用let，var能用的場(chǎng)景都可以使用let替代。