ES6中塊級(jí)作用域綁定的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)ES6中塊級(jí)作用域綁定的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

眾所周知，js中的var聲明存在變量提升機(jī)制，因此ESMAScript 6引用了塊級(jí)作用域來(lái)強(qiáng)化對(duì)變量生命周期的控制
let const 聲明不會(huì)被提升，有幾個(gè)需要注意的點(diǎn)

1、不能被重復(fù)聲明

假設(shè)作用域中已經(jīng)存在某個(gè)標(biāo)識(shí)符（無(wú)論該標(biāo)識(shí)符是通過(guò)var聲明還是let、const變量聲明），此時(shí)再使用let或const關(guān)鍵定聲明會(huì)拋錯(cuò)

var count=10
let count=20// 此處則會(huì)拋出錯(cuò)誤，因?yàn)橥蛔饔糜騼?nèi)不能重復(fù)聲明

如果當(dāng)前作用域內(nèi)嵌另一個(gè)作用域，便可在內(nèi)嵌的作用域中用let聲明同名變量

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

2、const聲明的常量必須進(jìn)行初始化

像下面這樣聲明就會(huì)報(bào)錯(cuò)

const name;//語(yǔ)法錯(cuò)誤，常量未初始化

3、不可以為const定義的常量再賦值，真正的本質(zhì)是const聲明不允許修改綁定，但允許修改值（也就是說(shuō)const聲明對(duì)象后，可以修改該對(duì)象的屬性值）

const person={
 name:'angela'
}
//可以修改對(duì)象屬性的值
person.name='yun'
// 修改綁定則會(huì)拋出語(yǔ)法錯(cuò)誤
person={
 'name':'Shining'
}

4、臨時(shí)性死區(qū)(Temporal Dead Zone)

JavaScript引擎在掃描代碼發(fā)現(xiàn)變量聲明時(shí)，要么將它們提升至作用域頂部（遇到var聲明），要么將聲明放到TDZ中（遇到let和const聲明），訪問(wèn)TDZ中的變量會(huì)觸發(fā)運(yùn)行時(shí)錯(cuò)誤，只有執(zhí)行過(guò)變量聲明語(yǔ)句后，變量才會(huì)從TDZ中移出，才能正常訪問(wèn)
如下代碼就因?yàn)樵趇f塊級(jí)作用域內(nèi)執(zhí)行console.log時(shí)value已經(jīng)在TDZ中了，以前typeof是一個(gè)相對(duì)不易出錯(cuò)的操作符，但其實(shí)也無(wú)法阻擋引擎拋出錯(cuò)誤

在聲明前訪問(wèn)塊級(jí)綁定會(huì)導(dǎo)致錯(cuò)誤，因?yàn)榻壎ㄔ谂R時(shí)死區(qū)中

if (true) {
 console.log(typeof value)//引用錯(cuò)誤
 let value = 'blue'
}

而在let聲明的作用域外對(duì)該變量使用typeof則不會(huì)報(bào)錯(cuò)

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

5、塊級(jí)作用域綁定

之前在循環(huán)中創(chuàng)建函數(shù)都有些不可言狀

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

因?yàn)檠h(huán)內(nèi)部創(chuàng)建的函數(shù)全部都保留了對(duì)相同變量的引用，循環(huán)結(jié)束時(shí)變量i的值為10，所以結(jié)果會(huì)輸出10次10

于是大家會(huì)在循環(huán)中使用立即調(diào)用函數(shù)表達(dá)式，以強(qiáng)制生成計(jì)數(shù)器變量的副本，以便輸出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，立即調(diào)用函數(shù)表達(dá)式則可以簡(jiǎn)化，其實(shí)每次迭代循環(huán)都會(huì)創(chuàng)建一個(gè)新變量，并以之前迭代中同名變量的值將其初始化

var funcs = []
for (let i = 0; i < 10; i++) {
//其實(shí)是每次循環(huán)的時(shí)候let聲明都會(huì)創(chuàng)建一個(gè)新變量i并將其初始化為i的當(dāng)前值，所以在循環(huán)內(nèi)部創(chuàng)建的每個(gè)函數(shù)都能得到屬于它們自己的i的副本
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()//這里輸出是0 然后是1、2....9
})

這個(gè)特性同樣適用于for in中，舉例來(lái)說(shuō)

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、循環(huán)中的let聲明特性同樣適用于const聲明，唯一的區(qū)別是const不能更改綁定

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

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
//之所以可以運(yùn)用for in 和for of循環(huán)中，是因?yàn)槊看蔚粫?huì)修改已有綁定，而是會(huì)創(chuàng)建一個(gè)新綁定
for (const key in obj) {
 funcs.push(function () {
  console.log(key)// 同樣輸出a b c 唯一的區(qū)別是循環(huán)內(nèi)不能更改key的值
 })
}
funcs.forEach(function (func) {
 func()
})

下面的這個(gè)例子則會(huì)報(bào)錯(cuò)，因?yàn)樵趂or循環(huán)中更改了i的綁定而const常量不能更改綁定

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

7、全局作用域綁定

當(dāng)var被作用于全局作用域時(shí)，它會(huì)創(chuàng)建一個(gè)新的全局變量作用全局對(duì)象（瀏覽器環(huán)境中的window對(duì)象）的屬性，這意味著用var很可能會(huì)無(wú)意中覆蓋一個(gè)已經(jīng)存在的全局變量

從上圖代碼中看出即便是全局對(duì)象RegExp Array都會(huì)被覆蓋

但是let或const會(huì)在全局作用域下創(chuàng)建一個(gè)新的綁定，但該綁定不會(huì)添加為全局對(duì)象的屬性，換句話說(shuō)用let或const不能覆蓋全局變量，而只能遮蔽它

這個(gè)時(shí)候的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)

最佳實(shí)踐：

默認(rèn)使用let而不是var

默認(rèn)使用const，只有確實(shí)需要改變變量的值時(shí)使用let

關(guān)于“ES6中塊級(jí)作用域綁定的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。