深入理解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
上一篇 2025年11月25日 07:00
下一篇 2025年11月25日 05:00

相關推薦

  • Go工程師體系課 008【學習筆記】

    訂單及購物車 先從庫存服務中將 srv 的服務程式碼框架複製過來,搜尋取代對應的名稱(order_srv) 加密技術基礎 對稱式加密(Symmetric Encryption) 原理: 使用同一個金鑰進行加密和解密 就像一把鑰匙,既能鎖門也能開門 加密速度快,適合大量資料傳輸 使用情境: 本機檔案加密 資料庫內容加密 大量資料傳輸時的內容加密 內部系統間的快速通…

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

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

    個人 2025年3月8日
    1.3K00
  • TS珠峰 001【學習筆記】

    課程大綱 建置 TypeScript 開發環境。 掌握 TypeScript 的基礎類型、聯集類型和交集類型。 詳細類型斷言的作用和用法。 掌握 TypeScript 中函式、類別的類型宣告方式。 掌握類型別名、介面的作用和定義。 掌握泛型的應用情境,熟練應用泛型。 靈活運用條件類型、映射類型與內建類型。 建立和使用自訂義類型。 理解命名空間、模組的概念以及使…

    個人 2025年3月27日
    1.6K00
  • TS珠峰 003【學習筆記】

    裝飾器 // 裝飾器 // 只能在類別中使用(類別本身,類別成員使用) // 裝飾器,類別的裝飾器,屬性裝飾器,存取器裝飾器 參數裝飾器 // 1. 類別裝飾器 給類別進行擴充,也可以回傳一個子類別 // 必須先在tsconfig.json中啟用experimentalDecorators const classDecorator1 =

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

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

    2025年11月25日
    30900
簡體中文 繁體中文 English