資訊專欄INFORMATION COLUMN
摘要：沒有聲明的情況和都能夠聲明塊級作用域，用法和是類似的，的特點是不會變量提升，而是被鎖在當前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。
本章涉及3個知識點，var、let、const，現在讓我們了解3個關鍵字的特性和使用方法。
varJavaScript中，我們通常說的作用域是函數作用域，使用var聲明的變量，無論是在代碼的哪個地方聲明的，都會提升到當前作用域的最頂部，這種行為叫做變量提升（Hoisting）
也就是說，如果在函數內部聲明的變量，都會被提升到該函數開頭，而在全局聲明的變量，就會提升到全局作用域的頂部。
function test() {
console.log("1: ", a) //undefined
if (false) {
var a = 1
}
console.log("3: ", a) //undefined
}
test()
實際執行時，上面的代碼中的變量a會提升到函數頂部聲明，即使if語句的條件是false，也一樣不影響a變量提升。
function test() {
var a
//a聲明沒有賦值
console.log("1: ", a) //undefined
if (false) {
a = 1
}
//a聲明沒有賦值
console.log("3: ", a) //undefined
}
在函數嵌套函數的場景下，變量只會提升到最近的一個函數頂部，而不會。
//b提升到函數a頂部，但不會提升到函數test。
function test() {
function a() {
if (false) {
var b = 2
}
}
console.log("b: ", b)
}
test() //b is not defined
如果a沒有聲明，那么就會報錯，沒有聲明和聲明后沒有賦值是不一樣的，這點一定要區分開，有助于我們找bug。
//a沒有聲明的情況 a is not definedlet
let和const都能夠聲明塊級作用域，用法和var是類似的，let的特點是不會變量提升，而是被鎖在當前塊中。
一個非常簡單的例子：
function test() {
if(true) {
console.log(a)//TDZ，俗稱臨時死區，用來描述變量不提升的現象
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() // 1
const
聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。
const type = "ACTION"
我們試試重新聲明type，看看會報什么錯：
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和let的異同點
相同點：const和let都是在當前塊內有效，執行到塊外會被銷毀，也不存在變量提升（TDZ），不能重復聲明。
不同點：const不能再賦值，let聲明的變量可以重復賦值。
臨時死區(TDZ)上面我們也提到了TDZ的場景，那么，有什么用呢？答案就是沒什么用。
臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。
if (true) {
//這塊區域是TDZ
let a = 1
}
塊級作用域的使用場景
除了上面提到的常用聲明方式，我們還可以在循環中使用，最出名的一道面試題：循環中定時器閉包的考題
在for循環中使用var聲明的循環變量，會跳出循環體污染當前的函數。
for(var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i) //5, 5, 5, 5, 5
}, 0)
}
console.log(i) //5 i跳出循環體污染外部函數
//將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無法污染外部函數
關于這個使用場景的具體分析可以查看我寫的另外一篇文章：JavaScript同步、異步、回調執行順序之經典閉包setTimeout面試題分析
在全局作用域聲明如果在全局作用域使用let或者const聲明，當聲明的變量本身就是全局屬性，比如closed。只會覆蓋該全局變量，而不會替換它。
window.closed = false let closed = true closed // true window.closed // false最佳實踐
在實際開發中，我們選擇使用var、let還是const，取決于我們的變量是不是需要更新，通常我們希望變量保證不被惡意修改，而使用大量的const，在react中，props傳遞的對象是不可更改的，所以使用const聲明，聲明一個對象的時候，也推薦使用const，當你需要修改聲明的變量值時，使用let，var能用的場景都可以使用let替代。
=> 返回文章目錄
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84008.html
摘要：和都能夠聲明塊級作用域，用法和是類似的，的特點是不會變量提升，而是被鎖在當前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時死區臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。 主要知識點有：var變量提升、let聲明、const聲明、let和const的比較、塊級綁定的應用場景showImg(https://segmentfault.com/img...
摘要：聲明聲明的語法與的語法一致?？偨Y文章都是以深入理解讀書筆記形式，大部分引用書中的定義，加上作者的理解，樣例也做了調整，所有樣例都可以放到里運行親自嘗試。 1.變量提升 使用 var 關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的 頂部（如果聲明不在任意函數內，則視為在全局作用域的頂部）。這句話從字面上不難理解。 但是他是怎樣一個過程，為什么會這樣。當你代...
摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...
摘要：錯誤的寫法錯誤的寫法中的構造函數新增了支持默認參數和不定參數。箭頭函數的簡單理解箭頭函數的左邊表示輸入的參數，右邊表示輸出的結果。但是有了尾調用優化之后，遞歸函數的性能有了提升。 作為前端切圖仔，越發覺得自己離不開函數了。 說到JavaScript函數，腦子里都是匿名函數、普通函數、閉包函數、構造函數......然后還能說出一大堆函數的概念。如果你達到這個水平，那么函數對你來說沒有難度...
閱讀 2418·2021-11-25 09:43
閱讀 1250·2021-11-24 09:39
閱讀 752·2021-11-23 09:51
閱讀 2389·2021-09-07 10:18
閱讀 1867·2021-09-01 11:39
閱讀 2783·2019-08-30 15:52
閱讀 2598·2019-08-30 14:21
閱讀 2863·2019-08-29 16:57
