摘要:和都能夠聲明塊級作用域,用法和是類似的,的特點是不會變量提升,而是被鎖在當前塊中。聲明常量,一旦聲明,不可更改,而且常量必須初始化賦值。臨時死區(qū)臨時死區(qū)的意思是在當前作用域的塊內,在聲明變量前的區(qū)域叫做臨時死區(qū)。
主要知識點有:var變量提升、let聲明、const聲明、let和const的比較、塊級綁定的應用場景
《深入理解ES6》筆記 目錄
varJavaScript中,我們通常說的作用域是函數作用域,使用var聲明的變量,無論是在代碼的哪個地方聲明的,都會提升到當前作用域的最頂部,這種行為叫做變量提升(Hoisting)
function test() { var a //a聲明沒有賦值 console.log("1: ", a) //undefined if (false) { a = 1 } //a聲明沒有賦值 console.log("3: ", a) //undefined }
test()
如果a沒有聲明,那么就會報錯,沒有聲明和聲明后沒有賦值是不一樣的,這點一定要區(qū)分開,有助于我們找bug。
//b提升到函數a頂部,但不會提升到函數test。 function test() { function a() { if (false) { var b = 2 } } console.log("b: ", b) } test() //b is not definedlet
let和const都能夠聲明塊級作用域,用法和var是類似的,let的特點是不會變量提升,而是被鎖在當前塊中。
function test() { if(true) { console.log(a)//TDZ,俗稱臨時死區(qū),用來描述變量不提升的現象 let a = 1 } } test() // a is not defined function test() { if(true) { let a = 1 } console.log(a) } test() // a is not defined
唯一正確的使用方法:先聲明,再訪問。
function test() { if(true) { let a = 1 console.log(a) } } test() // 1const
聲明常量,一旦聲明,不可更改,而且常量必須初始化賦值。
const type = "ACTION"
重新賦值會報錯
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雖然是常量,不允許修改默認賦值,但如果定義的是對象Object,那么可以修改對象內部的屬性值。
const type = { a: 1 } type.a = 2 //沒有直接修改type的值,而是修改type.a的屬性值,這是允許的。 console.log(type) // {a: 2}
const聲明不允許修改綁定,但允許修改綁定的值
const和let的異同點:
相同點:const和let都是在當前塊內有效,執(zhí)行到塊外會被銷毀,也不存在變量提升(TDZ),不能重復聲明。
不同點:const不能再賦值,let聲明的變量可以重復賦值。
臨時死區(qū)(TDZ)臨時死區(qū)的意思是在當前作用域的塊內,在聲明變量前的區(qū)域叫做臨時死區(qū)。
if (true) { //這塊區(qū)域是TDZ,訪問a會報錯 let a = 1 }
訪問TDZ中的變量會觸發(fā)運行時錯誤
但下面這種不會報錯
console.log(typeof a) //undefined,因為此時a不在TDZ中 if (true) { //這塊區(qū)域是TDZ,訪問a會報錯 let a = 1 }塊級作用域的使用場景
除了上面提到的常用聲明方式,我們還可以在循環(huán)中使用,最出名的一道面試題:循環(huán)中定時器閉包的考題
在for循環(huán)中使用var聲明的循環(huán)變量,會跳出循環(huán)體污染當前的函數。
for(var i = 0; i < 5; i++) { setTimeout(() => { console.log(i) //5, 5, 5, 5, 5 }, 0) } console.log(i) //5 i跳出循環(huán)體污染外部函數 //將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無法污染外部函數
循環(huán)內const聲明
在普通的for循環(huán)中使用const變量,由于const變量不可修改,因此會報錯。而在for-in或者for-of循環(huán)中可以使用const變量。
因為循環(huán)為每次迭代創(chuàng)建了一個新的變量綁定,而不是試圖去修改已綁定的變量的值
let arr = [1,2,3,4]; for(const item of arr){ console.log(item); //輸出1,2,3,4 }全局塊作用域綁定
用var作用域全局作用域時聲明的全局變量會覆蓋一個已經存在的全局屬性:
var reg = "hello"; console.log(window.reg) //"hello"
而如果在全局作用域使用let或者const聲明,當聲明的變量本身就是全局屬性,比如closed。會創(chuàng)建一個新的綁定,但不會添加全局屬性;就是說,用let或const不能覆蓋全局變量,只能遮蔽它;
window.closed = false let closed = true closed // true window.closed // false最佳實踐
在實際開發(fā)中,我們選擇使用var、let還是const,取決于我們的變量是不是需要更新,通常我們希望變量保證不被惡意修改,而使用大量的const,聲明一個對象的時候,也推薦使用const,當你需要修改聲明的變量值時,使用let,var能用的場景都可以使用let替代。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/96866.html
摘要:聲明聲明的語法與的語法一致。總結文章都是以深入理解讀書筆記形式,大部分引用書中的定義,加上作者的理解,樣例也做了調整,所有樣例都可以放到里運行親自嘗試。 1.變量提升 使用 var 關鍵字聲明的變量,無論其實際聲明位置在何處,都會被視為聲明于所在函數的 頂部(如果聲明不在任意函數內,則視為在全局作用域的頂部)。這句話從字面上不難理解。 但是他是怎樣一個過程,為什么會這樣。當你代...
摘要:沒有聲明的情況和都能夠聲明塊級作用域,用法和是類似的,的特點是不會變量提升,而是被鎖在當前塊中。聲明常量,一旦聲明,不可更改,而且常量必須初始化賦值。臨時死區(qū)的意思是在當前作用域的塊內,在聲明變量前的區(qū)域叫做臨時死區(qū)。 本章涉及3個知識點,var、let、const,現在讓我們了解3個關鍵字的特性和使用方法。 var JavaScript中,我們通常說的作用域是函數作用域,使用var聲...
摘要:錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數,右邊表示輸出的結果。但是有了尾調用優(yōu)化之后,遞歸函數的性能有了提升。 作為前端切圖仔,越發(fā)覺得自己離不開函數了。 說到JavaScript函數,腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平,那么函數對你來說沒有難度...
閱讀 2758·2021-11-19 09:40
閱讀 5332·2021-09-27 14:10
閱讀 2110·2021-09-04 16:45
閱讀 1489·2021-07-25 21:37
閱讀 3005·2019-08-30 10:57
閱讀 2990·2019-08-28 17:59
閱讀 1062·2019-08-26 13:46
閱讀 1415·2019-08-26 13:27