深入理解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),以強制生成計數變數的副本。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 006【學習筆記】

    Symbol 與 Symbol 屬性 第6種原始資料型別:Symbol。私有名稱原本是為了讓開發者們建立非字串屬性名稱而設計的,但是一般的技術無法偵測這些屬性的私有名稱 建立 Symbol let firstName = Symbol(); let person = {} person[firstName] = "Nicholas"; cons…

    個人 2025年3月8日
    1.3K00
  • 深入理解ES6 003【學習筆記】

    函數參數預設值,以及一些關於 arguments 物件,如何使用運算式作為參數、參數的暫時性死區。 以前設定預設值總是利用在含有邏輯或運算子的運算式中,前一個值是 false 時,總是回傳後面那個值,但如果我們給參數傳入 0 時,就會有些麻煩。 需要去驗證一下型別 function makeRequest(url,timeout,callback){ timeout = t…

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

    需求分析 後台管理系統 商品管理 商品列表 商品分類 品牌管理 品牌分類 訂單管理 訂單列表 使用者資訊管理 使用者列表 使用者地址 使用者留言 輪播圖管理 電商系統 登入頁面 首頁 商品搜尋 商品分類導覽 輪播圖展示 推薦商品展示 商品詳情頁 商品圖片展示 商品描述 商品規格選擇 加入購物車 購物車 商品列表 數量調整 刪除商品 結帳功能 使用者中心 訂單中心 我的…

    2025年11月25日
    27300
  • 熱愛運動,挑戰極限,擁抱自然

    熱愛 在這個快節奏的時代,我們被工作、生活的壓力所包圍,常常忽略了身體的需求。而運動,不只是一種健身方式,更是一種釋放自我、挑戰極限、與自然共舞的生活態度。無論是滑雪、攀岩、衝浪,還是跑步、騎行、瑜伽,每一種運動都能讓我們找到內心的激情,感受到生命的躍動。 運動是一場自我挑戰。挑戰極限,不只是職業運動員的專屬,而是每一個熱愛運動的人都可以追求的目標。它可…

    個人 2025年2月26日
    1.4K00
  • 從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
簡體中文 繁體中文 English