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

相關推薦

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

    訂單及購物車 先從庫存服務中將 srv 的服務代碼框架複製過來,查找替換對應的名稱(order_srv) 加密技術基礎 對稱加密(Symmetric Encryption) 原理: 使用同一個密鑰進行加密和解密 就像一把鑰匙,既能鎖門也能開門 加密速度快,適合大量數據傳輸 使用場景: 本地文件加密 數據庫內容加密 大量數據傳輸時的內容加密 內部系統間的快速通…

    個人 2025年11月25日
    30300
  • 深入理解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 = <T extends new …

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

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

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