程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄

• 文章85
• 標籤46

標籤查看更多

• #frontendMasters
• #JavaScript
• #javaScriptTheHardPartsV3
• #advancedWebDevelopmentQuiz
• #HTML
• #CSS
• #Prototype
• #OOP
• #Closure

分類查看更多

• Advanced Web Dev Quiz (27)
  • CORS Config 解析：Preflight、Credentials 與 Response Headers
  • 圖片格式完整比較：JPEG、PNG、WebP、AVIF 的壓縮、透明與色域差異
  • CSS Render Layer
  • 從 HSTS 看網站安全：理解 Strict-Transport-Security Header
  • CSS 選擇器：如何只選中第一個 <li> 元素
  • 理解 Set-Cookie 與 Cookie 的運作機制
  • CSS font-display 五種策略（auto/block/swap/fallback/optional）
  • XSS／CSRF／Clickjacking／MITM 名詞整理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 JavaScript Promise 方法：all、race、any、allSettled
  • 理解 JavaScript Generator 函式與 yield 運作原理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標
  • JavaScript WeakMap 與 Map 的差異及實際應用
  • CSS 選擇器權重 | Specificity
  • JavaScript 事件傳遞機制：Capturing 與 Bubbling 的執行順序
  • CSS 動畫的渲染成本（Layout、Paint、Composite）
  • JavaScript 垃圾回收機制：理解 Mark and Sweep 演算法與記憶體管理
  • HTTP Cache：快取指令與應用
  • 從輸入網址到頁面載入：PerformanceNavigationTiming
  • JavaScript 展開運算子的淺拷貝陷阱：物件參考問題解析
  • 前端資源預加載：dns-prefetch、preconnect、prefetch、preload
  • 瀏覽器的呼叫堆疊與事件循環 | Call Stack & Event Loop
  • DNS 解析流程 | Resolving Domain Requests
  • 渲染流程與合成 | Rendering Pipeline & Compositing
  • async vs. defer
  • bfcache 是什麼？為什麼 unload 會讓頁面失去 bfcache 資格
• JavaScript Hard Parts v3 (46)
  • 解法三的問題與 `class` 語法糖：解法四
  • `new` 關鍵字的完整執行流程
  • 解法三：`new` 關鍵字與函式的雙重身份
  • 方法內的巢狀函式與箭頭函式的 `this` 綁定
  • `Object.prototype`：原型鏈的頂端
  • 原型鏈的運作機制與 `this`
  • 解法二：用原型鏈共享方法，避免記憶體浪費
  • 工廠函式：解決手動建立物件的第一種方法
  • Object Literal、Dot Notation、Object.create：三種建立物件的方式
  • 物件導向 JavaScript：OOP 的核心目標與原型鏈基礎
  • Promise 錯誤處理、AbortSignal 與非同步 JavaScript 總結
  • Microtask Queue：Promise 回呼的優先執行機制
  • 當 Callback Queue 遇上 Promise：執行順序追蹤
  • Promise 的運作機制：物件持久性、記憶體參照
  • ES6 Promises 與 fetch
  • ES5 Callback 模式的侷限，與 ES6 Promises 的登場
  • Event Loop：JavaScript 非同步執行的調度核心
  • Callback Queue 與執行規則：非同步回呼如何回到 JavaScript
  • Callback Function 與 Web Browser APIs 的運作原理
  • Promises、Async 與 Event Loop：為什麼 JavaScript 需要非同步機制
  • hint 參數、Symbol 本質與元程式設計
  • Symbol 與手動控制 ToPrimitive 強制轉換
  • ToPrimitive 強制轉換與 `@@toPrimitive` 隱藏屬性
  • Date 物件的隱藏屬性 `[[DateValue]]` 與方括號記法動態存取
  • JavaScript 記憶體模型：原始型別、Stack 與 Heap、物件參考比較
  • JavaScript 型別強制轉換三條路徑：ToNumber、ToString、ToBoolean
  • ToBoolean 強制轉換、寬鬆相等與嚴格相等
  • 加法運算子的例外：型別強制轉換規則與手動控制
  • JavaScript 型別強制轉換：運算子、ToNumber 與 DOM 字串
  • Closure 的實際應用：once、memoize、Iterator 與 Module Pattern
  • Closure：為什麼每次呼叫外層函式都是全新開始
  • Closure 獨立性與變數查找順序：同一函式的多個閉包互不干擾
  • JavaScript Closure 的真實樣貌：Scope、COVE 與詞彙作用域
  • JavaScript Closure 背包機制：私有狀態如何被保留
  • JavaScript Closure 與背包（Backpack）的運作機制
  • JavaScript Closure 的核心問題：變數存取由定義位置還是呼叫位置決定？
  • JavaScript 函式回傳函式：執行環境 (Execution Context) 與 Call Stack 運作解析
  • JavaScript Closure（閉包）：原理與核心應用
  • JavaScript 陣列變異方法與 ES2023 非變異替代方案（Pure Function、Side Effect）
  • 箭頭函式（Arrow Function）、匿名函式與 map 方法
  • JavaScript 一級函式與高階函式（Higher-Order Function）入門
  • 以 copyArrayAndManipulate 拆解高階函式 (Higher-Order Function) 的執行原理
  • JavaScript 執行上下文與高階函式：從重複程式碼到通用化設計
  • JavaScript 的 Higher-Order Functions：從 DRY 到函式作為參數
  • Call Stack 是什麼？理解 JavaScript 的呼叫堆疊機制
  • JavaScript 執行原理：執行緒、記憶體與執行環境（Execution Context）
• JS地下城 (5)
  • 幹嘛不自己上網查就好的 JavaScript 世界時鐘 | JS地下城 - 004
  • 不負責任的 JavaScript 計算機 | JS地下城 - 003
  • 俄羅斯方塊謎題 | JS地下城 - 番外篇 - 001
  • CSS、JS切個時鐘吧 | JS地下城 - 002
  • 用 JavaScript 切出九九乘法表 | JS地下城 - 001
• 學習經歷 (2)
  • 我該早點學的前端技術|不學無術也該有個限度
  • 線下不能群聚? 那線上總可以吧! 200人六角線上前端切版直播課程
• 生活亂談 (2)
  • Hi 👋 我是許文修 歡迎來到我的部落格
  • 《1917》最佳影片與導演獎熱門首選 | 電影雜談
• 程式筆記 (3)
  • 聰明的處理前端表單 | FormData API | handling-form-without-any-dependencies
  • Teachable 的 Sidebar 你的時辰到了 | Tampermonkey Userscript
  • gulp-gh-pages deploy 失敗QQ | 程式筆記 - 001

Dev

前端技術、踩坑紀錄與學習筆記

83 篇

2026-05-0511 分鐘閱讀

Closure：為什麼每次呼叫外層函式都是全新開始

釐清 closure 的常見誤解：外層函式本身沒有記憶，被回傳的函式攜帶的是定義當下的資料快照。說明本地記憶體與背包的差異、背包的私有性與持久性，以及如何透過重新指派變數釋放背包記憶體，最後延伸至 IIFE 與 Module Pattern 的核心原理。

JavaScript Hard Parts v3

#JavaScript #Closure #frontendMasters #javaScriptTheHardPartsV3

2026-05-0412 分鐘閱讀

Closure 獨立性與變數查找順序：同一函式的多個閉包互不干擾

每次呼叫外層函式都會產生獨立的 closure，彼此狀態互不影響。本文透過程式碼範例，說明變數定義在本地、背包或全域時的不同行為，以及 JavaScript 查找變數的完整優先順序。

JavaScript Hard Parts v3

#JavaScript #Closure #frontendMasters #javaScriptTheHardPartsV3

2026-05-0311 分鐘閱讀

JavaScript Closure 的真實樣貌：Scope、COVE 與詞彙作用域

拆解 JavaScript Closure 的底層實作：隱藏屬性 Scope 如何儲存背包、Closed Over Variable Environment(COVE)的正式定義，以及 Lexical Scoping 為什麼是 Closure 能夠存在的根本原因。

JavaScript Hard Parts v3

#JavaScript #Closure #Scope #frontendMasters #javaScriptTheHardPartsV3

2026-05-028 分鐘閱讀

JavaScript Closure 背包機制：私有狀態如何被保留

剖析 JavaScript Closure（閉包）的背包機制:為什麼只打包被參照的變數、資料如何保持私有,以及它在 Module Pattern 與非同步程式中扮演的關鍵角色。

JavaScript Hard Parts v3

#JavaScript #Closure #frontendMasters #javaScriptTheHardPartsV3

2026-05-0110 分鐘閱讀

JavaScript Closure 與背包（Backpack）的運作機制

函式被定義時，會與周圍的資料產生隱藏連結。即使父執行環境已關閉，函式仍能透過這份附加的資料——也就是「背包（Backpack）」——持續存取原本的狀態。

JavaScript Hard Parts v3

#JavaScript #Closure #frontendMasters #javaScriptTheHardPartsV3

2026-04-3010 分鐘閱讀

JavaScript Closure 的核心問題：變數存取由定義位置還是呼叫位置決定？

透過兩個範例觀察 JavaScript 函式的 Call Stack 執行流程，比較函式存取外層變數的依據究竟是「定義位置」還是「呼叫位置」，為理解 Closure（閉包）與 Lexical Scope 建立基礎。

JavaScript Hard Parts v3

#JavaScript #Closure #Scope #ExecutionContext #frontendMasters #javaScriptTheHardPartsV3

2026-04-2913 分鐘閱讀

JavaScript 函式回傳函式：執行環境 (Execution Context) 與 Call Stack 運作解析

詳解 JavaScript 函式回傳函式時的執行流程，包含執行環境 (Execution Context) 的建立與銷毀、Call Stack 的 push/pop、本地記憶體隔離機制，並釐清函式被回傳後與外層函式「再無任何連結」的核心觀念，為理解 Closure 奠定基礎。

JavaScript Hard Parts v3

#JavaScript #ExecutionContext #CallStack #frontendMasters #javaScriptTheHardPartsV3

2026-04-2810 分鐘閱讀

JavaScript Closure（閉包）：原理與核心應用

說明 JavaScript Closure（閉包）的運作原理：函式執行後本地記憶體為何清空、回傳函式如何讓資料得以持久保存，以及 Closure 如何成為 once、memoize、Module Pattern 與非同步回呼的基礎機制。

JavaScript Hard Parts v3

#JavaScript #Closure #frontendMasters #javaScriptTheHardPartsV3

2026-04-2710 分鐘閱讀

JavaScript 陣列變異方法與 ES2023 非變異替代方案（Pure Function、Side Effect）

說明 JavaScript 陣列中會直接修改原始資料的變異方法（reverse、splice、sort），以及 ES2023 新增的非變異替代版本（toReversed、toSpliced、toSorted）。並介紹 Side Effect 概念，補充 flat()、findLastIndex()、Object.groupBy() 等高階函式（Higher-Order Function）的用法。

JavaScript Hard Parts v3

#JavaScript #HigherOrderFunction #PureFunction #frontendMasters #javaScriptTheHardPartsV3

2026-04-2610 分鐘閱讀

箭頭函式（Arrow Function）、匿名函式與 map 方法

比較四種 JavaScript 函式定義語法，說明箭頭函式的簡寫規則與 this 行為差異，介紹匿名函式的使用時機，以及內建 Array.prototype.map 的運作原理與原型鏈基礎。

JavaScript Hard Parts v3

#JavaScript #ArrowFunction #frontendMasters #javaScriptTheHardPartsV3

123456789

MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog