深入理解ES6 001【學習筆記】

塊級作用域綁定

之前的變量聲明var無論在哪裡聲明的都被認為是作域頂部聲明的,由於函數是一等公民,所以順序一般是function 函數名()var 變量

塊級聲明

塊級聲明用於聲明在指定塊的作用域之外無法訪問的變量。塊級作用域存在於:

  • 函數內部
  • 塊中(字符和{}之間的區域)

臨時死區

javascript引擎在掃描代碼發現變量聲明時,要麼將它們提升至作用域頂部,要麼放到TDZ中。訪問TDZ的變量會觸發運行時錯誤。只有執行過變量聲明後,變量才會從TDZ中移出,然後訪問可正常訪問。

if(condition){
  console.log(typeof value) // 引用錯誤
  let value = "blue";
}
// 以下的value並不在TDZ中
console.log(typeof value); // "undefined"
if(condition){
  let value="blue"
}

循環中的塊作用域綁定

使用let 變量只存在於for循環中,一旦循環結束,無法訪問這個變量

for(let i=0;i<10;i++){
  process(items[i]);
}
// i 在這裡不可訪問,拋出一個錯誤
console.log(i);

循環中的函數

var聲明讓開發者在循環中創建函數變得異常困難,因為變量到了循環之外仍能訪問。

var funs = [];
for(var i=0;i<10;i++){
  funs.push(function(){
    console.log(i)
  })
}
funcs.forEach(function(func){
  func(); // 輸出10次數字10
})

為瞭解決這個問題,開發者們在循環中使用立即調用函數表達式,以強制生成計數變量的副本。IIFE表達式為接受的每一個變量i都創建一個副本並存儲為變量value。這個變量的值就是相應迭代創建的函數所使用的值,因此調用每個函數

var funs = [];
for(var i=0;i<10;i++){
  funs.push((function(value){
    return function(){
      console.log(i)
    }
  })(i))
}
funcs.forEach(function(func){
  func(); // 輸出0,1,2...
})

循環中的let聲明

let聲明模仿上述所做的一切來簡化循環過程,每次迭代循環都分創建一個新變量,並以之前迭代中同名變量的值將其初始化。也適合於for-in for-of for-each

var funs = [];
for(let i=0;i<10;i++){
  funs.push(function(){
    console.log(i)
  })
}
funcs.forEach(function(func){
  func(); // 輸出0,1,2...
})

let聲明在循環內的行為是標準中專門定義的,它不一定與let的不提升特性相關,理解這一點至關重要。事實上,早期let實現中不包含這一行為。是後來加入的。

循環中使用const

for(const i=0;i<10;i++)會報錯,因為i++時試圖改變常量i的值。而在for-infor-of中因為沒有去試圖改原i值的操作。而是新創建了一個變量。所以執行會跟使用let聲明一樣

全局作用域綁定

letconstvar的另外一區別是它們在全局作用域中的行為。當var被用於全局作用域時,它會創建一個新的全局變量作為全局對象的屬性。這意味著var很有可能會無意中覆蓋一個已經存在的全局變量。而使用letconst不能覆蓋全局變量,而只能遮蔽它。so

let RegExp = 'Hello world'
console.log(window.RegExp === RegExp)

主題測試文章,只做測試使用。發佈者:Walker,轉轉請注明出處:https://walker-learn.xyz/archives/4308

(0)
Walker的頭像Walker
上一篇 2026年3月10日 00:00
下一篇 2026年3月8日 15:40

相關推薦

  • 深入理解ES6 004【學習筆記】

    擴展對象的功能 普通對象 具有js對象所有默認內部行為的 特異對象 具有某些與默認行為不符的內部行為 標準對象 es6規範中定義的對象,Array/Date等 內建對象 腳本開始執行時存在於javascript執行環境的對象,所有標準對象都是內建對象 對象字面量語法擴展 屬性初始值的簡寫,當一個對象的屬性與本地變量同名時,不必再寫冒號和值 對象方法的簡寫語法…

    個人 2025年3月8日
    1.3K00
  • Go工程師體系課 017【學習筆記】

    限流、熔斷與降級入門(含 Sentinel 實戰) 結合課件第 3 章(3-1 ~ 3-9)的視頻要點,整理一套面向初學者的服務保護指南,幫助理解“為甚麼需要限流、熔斷和降級”,以及如何用 Sentinel 快速上手。 學習路線速覽 3-1 理解服務雪崩與限流、熔斷、降級的背景 3-2 Sentinel 與 Hystrix 對比,明確技術選型 3-3 Sen…

    個人 2025年11月25日
    23800
  • 從0到1落地微前端架構 001【學習筆記】

    微前端 js 隔離css 隔離元素隔離生命週期預加載數據通信應用跳轉多層嵌套 說明 使用的是 Mermaid 的 flowchart 語法,Markdown 渲染器如 Typora、VitePress、一些 Git 平台都支持。 保留了: 基座應用 main-vue3 各子應用:child-nuxt2-home、child-vue2-job、child-vu…

    2025年4月20日
    1.6K00
  • Go工程師體系課 013【學習筆記】

    訂單事務 先扣庫存 後扣庫存 都會對庫存和訂單都會有影響, 所以要使用分布式事務 業務(下單不對付)業務問題 支付成功再扣減(下單了,支付時沒庫存了) 訂單扣減,不支付(訂單超時歸還)【常用方式】 事務和分布式事務 1. 甚麼是事務? 事務(Transaction)是數據庫管理系統中的一個重要概念,它是一組數據庫操作的集合,這些操作要麼全部成功執行,要麼全部…

    個人 2025年11月25日
    28300
  • 深入理解ES6 010【學習筆記】

    改進的數組功能 new Array()的怪異行為,當構造函數傳入一個數值型的值,那麼數組的length屬性會被設為該值;如果傳入多個值,此時無論這些值是不是數值型的,都會變為數組的元素。這個特性另人困惑,你不可能總是注意傳入數據的類型,所以存在一定的風險。 Array.of() 無論傳多少個參數,不存在單一數值的特例(一個參數且數值型),總是返回包含所有參數…

    個人 2025年3月8日
    1.3K00
簡體中文 繁體中文 English