深入理解ES6學(xué)習(xí)筆記之塊級作用域綁定
眾所周知，js中的var聲明存在變量提升機(jī)制，因此ESMAScript 6引用了塊級作用域來強化對變量生命周期的控制
let const 聲明不會被提升，有幾個需要注意的點
1、不能被重復(fù)聲明
假設(shè)作用域中已經(jīng)存在某個標(biāo)識符（無論該標(biāo)識符是通過var聲明還是let、const變量聲明），此時再使用let或const關(guān)鍵定聲明會拋錯
var count=10 let count=20// 此處則會拋出錯誤，因為同一作用域內(nèi)不能重復(fù)聲明
如果當(dāng)前作用域內(nèi)嵌另一個作用域，便可在內(nèi)嵌的作用域中用let聲明同名變量
var count=10
if(true){
let count=20
}
2、const聲明的常量必須進(jìn)行初始化
像下面這樣聲明就會報錯
const name;//語法錯誤，常量未初始化
3、不可以為const定義的常量再賦值，真正的本質(zhì)是const聲明不允許修改綁定，但允許修改值（也就是說const聲明對象后，可以修改該對象的屬性值）
const person={
name:'angela'
}
//可以修改對象屬性的值
person.name='yun'
// 修改綁定則會拋出語法錯誤
person={
'name':'Shining'
}
4、臨時性死區(qū)(Temporal Dead Zone)
JavaScript引擎在掃描代碼發(fā)現(xiàn)變量聲明時，要么將它們提升至作用域頂部（遇到var聲明），要么將聲明放到TDZ中（遇到let和const聲明），訪問TDZ中的變量會觸發(fā)運行時錯誤，只有執(zhí)行過變量聲明語句后，變量才會從TDZ中移出，才能正常訪問
如下代碼就因為在if塊級作用域內(nèi)執(zhí)行console.log時value已經(jīng)在TDZ中了，以前typeof是一個相對不易出錯的操作符，但其實也無法阻擋引擎拋出錯誤
在聲明前訪問塊級綁定會導(dǎo)致錯誤，因為綁定在臨時死區(qū)中
if (true) {
console.log(typeof value)//引用錯誤
let value = 'blue'
}
而在let聲明的作用域外對該變量使用typeof則不會報錯
console.log(typeof value)
if (true) {
let value = 'blue'
}
5、塊級作用域綁定
之前在循環(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()
})
因為循環(huán)內(nèi)部創(chuàng)建的函數(shù)全部都保留了對相同變量的引用，循環(huán)結(jié)束時變量i的值為10，所以結(jié)果會輸出10次10
于是大家會在循環(huán)中使用立即調(diào)用函數(shù)表達(dá)式，以強制生成計數(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á)式則可以簡化，其實每次迭代循環(huán)都會創(chuàng)建一個新變量，并以之前迭代中同名變量的值將其初始化
var funcs = []
for (let i = 0; i < 10; i++) {
//其實是每次循環(huán)的時候let聲明都會創(chuàng)建一個新變量i并將其初始化為i的當(dāng)前值，所以在循環(huán)內(nèi)部創(chuàng)建的每個函數(shù)都能得到屬于它們自己的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、循環(huán)中的let聲明特性同樣適用于const聲明，唯一的區(qū)別是const不能更改綁定
上面的例子中把let換成const同樣輸出a b c
var funcs = [],
obj = {
a: true,
b: true,
c: true
}
//之所以可以運用for in 和for of循環(huán)中，是因為每次迭代不會修改已有綁定，而是會創(chuàng)建一個新綁定
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()
})
下面的這個例子則會報錯，因為在for循環(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被作用于全局作用域時，它會創(chuàng)建一個新的全局變量作用全局對象（瀏覽器環(huán)境中的window對象）的屬性，這意味著用var很可能會無意中覆蓋一個已經(jīng)存在的全局變量
從上圖代碼中看出即便是全局對象RegExp Array都會被覆蓋
但是let或const會在全局作用域下創(chuàng)建一個新的綁定，但該綁定不會添加為全局對象的屬性，換句話說用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)
最佳實踐：
默認(rèn)使用let而不是var
默認(rèn)使用const，只有確實需要改變變量的值時使用let
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文從列表、字符串和數(shù)字三個方面詳細(xì)闡述了Python中要求每行輸出5個的相關(guān)內(nèi)容，并給出了相應(yīng)的代碼示例，在實際開發(fā)中，我們可以根據(jù)具體的需求靈活運用這些方法，以提高程序的輸出效率和可讀性,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實現(xiàn)一個簡單的網(wǎng)頁版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
有效性驗證的方法有很多，在本文將為大家介紹下如何使用js簡單實現(xiàn)下，感興趣的朋友可以參考下2013-10-10
JavaScript中實現(xiàn)new的兩種方式引發(fā)的探究
眾所周知JS中new的作用是通過構(gòu)造函數(shù)來創(chuàng)建一個實例對象，這篇文章主要給大家介紹了關(guān)于JavaScript中實現(xiàn)new的兩種方式引發(fā)的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JavaScript超詳細(xì)實現(xiàn)網(wǎng)頁輪播圖
詳解JavaScript如何實現(xiàn)更短時間的延時函數(shù)