深入理解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://www.walker-learn.xyz/archives/4308

(0)
Walker的頭像Walker
上一篇 2025年3月8日 10:59
下一篇 2025年3月27日 15:01

相關推薦

  • TS珠峰 003【學習筆記】

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

    個人 2025年3月27日
    1.5K00
  • 深入理解ES6 007【學習筆記】

    Set集合與Map集合 在js中有一個in運算子,其不需要讀取物件的值就能判斷屬性在物件中是否存在,如果存在就回傳true。但是in運算子也會檢查物件的原型,只有當物件原型為null時使用這個方法才比較穩妥。 Set集合 let set = new Set() set.add(5) set.add("5") console.log(s…

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

    解構:使用資料存取更便捷 如果使用 var、let 或 const 解構宣告變數,則必須要提供初始化程式(也就是等號右側的值)如下會導致錯誤 // 語法錯誤 var {tyep,name} // 語法錯誤 let {type,name} // 語法錯誤 const {type,name} 使用解構給已經宣告的變數賦值,如下 let node = { type:&qu…

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

    protoc-gen-validate 簡介與使用指南 ✅ 什麼是 protoc-gen-validate protoc-gen-validate(簡稱 PGV)是一個 Protocol Buffers 外掛程式,用於在生成的 Go 程式碼中加入結構體欄位的驗證邏輯。 它透過在 .proto 檔案中加入 validate 規則,自動為每個欄位生成驗證程式碼,避免你手…

    個人 2025年11月25日
    1.4K00
  • Node深入淺出(聖思園教育) 002【學習筆記】

    node 的套件管理機制和載入機制 npm search xxxnpm view xxxnpm install xxx nodejs 檔案系統操作的 api Node.js 的 fs 模組提供同步(Sync)與基於回呼/Promise 的非同步 API,可以操作本機檔案與目錄。日常開發中常用的能力包括讀取、寫入、追加、刪除、遍歷目錄、監聽變化等。以下範例基於 C…

    個人 2025年11月24日
    32000
簡體中文 繁體中文 English