JavaScript ES6之塊級作用域綁定

本篇文章主要介紹了深入理解ES6學習筆記之塊級作用域綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下

眾所周知，js中的var聲明存在變數提升機制，因此ESMAScript 6引用了區塊級作用域來強化對變數生命週期的控制
let const 宣告不會被提升，有幾個需要注意的點

1、不能被重複宣告

假設作用域中已經存在某個識別碼（無論該識別碼是透過var宣告或let、const變數宣告），此時再使用let或const關鍵定宣告會丟棄錯誤

var count=10
let count=20// 此处则会抛出错误，因为同一作用域内不能重复声明

如果目前作用域內嵌另一個作用域，則可在嵌入式的作用域中以let宣告同名變數

var count=10
if(true){
  let count=20
}

2、const宣告的常數必須初始化

像下面這樣宣告就會報錯

const name;//语法错误，常量未初始化

3、不可以為const定義的常數再賦值，真正的本質是const聲明不允許修改綁定，但允許修改值（也就是說const聲明物件後，可以修改該物件的屬性值）

const person={
 name:'angela'
}
//可以修改对象属性的值
person.name='yun'
// 修改绑定则会抛出语法错误
person={
 'name':'Shining'
}

4、臨時性死區(Temporal Dead Zone)

#JavaScript引擎在掃描程式碼發現變數宣告時，要么將它們提升至作用域頂部（遇到var聲明），要么將聲明放到TDZ中（遇到let和const聲明），訪問TDZ中的變數會觸發執行時錯誤，只有執行過變數宣告語句後，變數才會從TDZ中移出，才能正常存取
如下程式碼就因為在if區塊層級作用域內執行console.log時value已經在TDZ中了，以前typeof是一個相對不易出錯的操作符，但其實也無法阻擋引擎拋出錯誤

在聲明前訪問區塊級綁定會導致錯誤，因為綁定在臨時死區中

if (true) {
 console.log(typeof value)//引用错误
 let value = 'blue'
}

而在let宣告的作用域外對該變數使用typeof則不會錯誤

console.log(typeof value)
if (true) { 
 let value = 'blue'
}

#5、區塊級作用域綁定

之前在循環中建立函數都有些不可言狀

var funcs = []
for (var i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

因為循環內部創建的函數全部保留了相同變數的引用，循環結束時變數i的值為10，所以結果會輸出10次10​​

於是大家會在循環中使用立即呼叫函數表達式，以強制產生計數器變數的副本，以便輸出1、2、3......

var funcs = []
for (var i = 0; i < 10; i++) {

 funcs.push((function (value) {
  return function () {
   console.log(value)
  }
 })(i))

}
funcs.forEach(function (func) {
 func()
})

有了let，立即呼叫函數表達式則可以簡化，其實每次迭代循環都會創建一個新變量，並以之前迭代中同名變量的值將其初始化

var funcs = []
for (let i = 0; i < 10; i++) {
//其实是每次循环的时候let声明都会创建一个新变量i并将其初始化为i的当前值，所以在循环内部创建的每个函数都能得到属于它们自己的i的副本
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()//这里输出是0 然后是1、2....9
})

這個特性同樣適用於for in中，舉例來說

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
for (let key in obj) {
 funcs.push(function () {
  console.log(key)
 })
}
funcs.forEach(function (func) {
 func()//输出的是a b c
})

6、循環中的let宣告特性同樣適用於const聲明，唯一的差別是const不能更改綁定

上面的範例中把let換成const同樣輸出a b c

#

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
//之所以可以运用for in 和for of循环中，是因为每次迭代不会修改已有绑定，而是会创建一个新绑定
for (const key in obj) {
 funcs.push(function () {
  console.log(key)// 同样输出a b c 唯一的区别是循环内不能更改key的值
 })
}
funcs.forEach(function (func) {
 func()
})

下面的這個範例則會報錯，因為在for迴圈中更改了i的綁定而const常數不能更改綁定

var funcs = []
for (const i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

7、全域作用域綁定

當var被作用於全域作用域時，它會建立一個新的全域變數作用全域物件（瀏覽器環境中的window物件）的屬性，這表示用var很可能會無意中覆寫一個已經存在的全域變數

從上圖程式碼中看出即使是全域物件RegExp Array都會被覆寫

但是let或const會在全域作用域下創建一個新的綁定，但該綁定不會添加為全域物件的屬性，換句話說用let或const不能覆蓋全域變量，而只能遮蔽它

這個時候的RegExp和window.RegExp是不相同的

let RegExp='hello'
console.log(RegExp) //hello
console.log(window.RegExp===RegExp)//false

const ncz='hi'
console.log(ncz)
console.log("ncz" in window)

最佳實踐：

預設使用let而不是var

預設使用const，只有確實需要改變變數的值時使用let

以上是JavaScript ES6之塊級作用域綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！