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

• 文章140
• 標籤68

標籤查看更多

• #frontendMasters
• #JavaScript
• #deepJavaScriptFoundationsV3
• #javaScriptTheHardPartsV3
• #TypeCoercion
• #advancedWebDevelopmentQuiz
• #Scope
• #OOP
• #Prototype

分類查看更多

• 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 資格
• Deep JavaScript Foundations v3 (51)
  • `let` 不提升？這個說法是錯的
  • 提升（Hoisting）：一個有用但不精確的比喻
  • `const`：被高估的宣告關鍵字
  • 明確的 `let` 區塊：縮短變數的生命週期
  • `var` 與 `let` 的語意分工：各自有其適當的位置
  • 區塊範疇：`let`、`const` 與 `var` 的適當使用場景
  • IIFE：立即調用函式表達式
  • 函式範疇的實際用途：最小暴露原則
  • 詞彙範疇的視覺化：氣泡模型與編譯期優化
  • 詞彙範疇：正式定義與動態範疇的對比
  • 箭頭函式：不是萬能替代品
  • 為什麼要命名函式表達式：三個不可迴避的理由
  • 函式宣告 vs 函式表達式：識別字屬於哪個範疇
  • 巢狀範疇 (Nested Scope)：向外查找的完整鏈
  • 詞彙範疇的邊界案例：遮蔽缺失與自動全域變數
  • 執行階段：變數查找與目標/來源位置
  • 編譯階段與範疇管理：彈珠桶子對話模型
  • 範疇（Scope）：JavaScript 的兩階段處理模型
  • TypeScript 的運算元型別驗證：被低估的功能
  • 自訂型別與函式參數的型別標註
  • TypeScript 與 Flow 的型別推斷與型別標註
  • TypeScript 與 Flow：靜態型別工具的優點與侷限
  • 相等性練習解析：`findAll` 的實作邏輯
  • 相等性練習：實作受控制的強制相等搜尋函式
  • 為 `==` 辯護：一個更強的論點
  • `==` 的使用準則：何時用、何時不用
  • `==` 與 Boolean 的角落案例：永遠不要用 `== true` 或 `== false`
  • `==` 演算法逐步走讀：數字與陣列的比較案例
  • `==` 演算法逐步解析：偏好數字、遞迴收斂
  • 強制相等性：`==` 的實際運作與 `null`/`undefined` 的特殊關係
  • `==` 與 `===`：兩者的真正差異
  • 強制轉型練習解析：`isValidName` 與 `hoursAttended`
  • 強制轉型練習：實作輸入驗證函式
  • 隱式轉型即抽象：選擇顯式還是隱式的判斷框架
  • 強制轉型的哲學：擁抱它，而非迴避它
  • 強制轉型的角落案例：所有問題的根源
  • Boxing：原始值存取屬性背後的隱式轉型
  • 強制轉型的實際案例：你已經在用它了
  • `ToBoolean` 抽象操作：falsy 清單與 truthy 的判斷邏輯
  • `ToNumber` 抽象操作：數值轉換的規則與陷阱
  • `toString` 抽象操作：值的字串化規則與角落案例
  • 抽象操作與 ToPrimitive：型別轉換的底層機制
  • 基本物件：JavaScript 的內建建構函式
  • `Object.is()` Polyfill 解題解析
  • 型別檢測練習：實作 `Object.is()` Polyfill
  • 負零：JavaScript 中被刻意隱藏的特殊值
  • NaN：無效數字與正確的檢測方式
  • 三種「空」：undefined、undeclared 與 uninitialized
  • BigInt：JavaScript 的大整數原始型別
  • `typeof` 運算子：辨識值的型別
  • JavaScript 型別系統：原始型別的正確定義
• JavaScript Hard Parts v3 (50)
  • Private Static Fields：類別層級的私有共享資料
  • Private Instance Fields：真正的封裝
  • Public Instance Fields 的執行流程
  • `class` 的進階特性：`static` 方法與 Public Instance Fields
  • 解法三的問題與 `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 和 Life 的所有最新內容

140 篇

2026-05-2613 分鐘閱讀

`typeof` 運算子：辨識值的型別

介紹 typeof 運算子的核心特性：永遠回傳字串、回傳值是有限的可預測集合。並整理三個常見的特殊案例——typeof null 的歷史 bug、函式與陣列的差異處理，以及對未宣告識別字的安全行為。

Deep JavaScript Foundations v3

#JavaScript #frontendMasters #deepJavaScriptFoundationsV3 #TypeOf #Undefined

2026-05-2612 分鐘閱讀

JavaScript 型別系統：原始型別的正確定義

從 ECMAScript 規格書出發，釐清 JavaScript 型別系統的正確樣貌：原始型別有哪些、函式與陣列如何分類、為什麼「所有東西都是物件」是個誤解，以及動態定型語言中型別屬於值而非變數的核心概念。

Deep JavaScript Foundations v3

#JavaScript #frontendMasters #deepJavaScriptFoundationsV3 #PrimitiveTypes #TypeSystem

2026-05-2510 分鐘閱讀

Private Static Fields：類別層級的私有共享資料

介紹 private static fields 如何在類別層級儲存私有共享狀態，並以使用者數量上限為例說明其實際用途，最後整理四種 fields 的完整對照與課程總結。

JavaScript Hard Parts v3

#JavaScript #OOP #Class #Prototype #frontendMasters #javaScriptTheHardPartsV3

2026-05-2510 分鐘閱讀

Private Instance Fields：真正的封裝

說明為何需要私有欄位來防止外部直接修改物件屬性，介紹 `#` 符號的語法，以及 private instance fields 如何透過獨立的 private element properties 實現真正的封裝。

JavaScript Hard Parts v3

#JavaScript #OOP #Class #Prototype #frontendMasters #javaScriptTheHardPartsV3

2026-05-2411 分鐘閱讀

Public Instance Fields 的執行流程

逐步拆解 public instance fields 在物件建立時的完整執行流程，說明 `new` 關鍵字如何在執行 `constructor` 主體之前就將 `fields` 中的預設值附加到新物件上。

JavaScript Hard Parts v3

#JavaScript #OOP #Class #Prototype #frontendMasters #javaScriptTheHardPartsV3

2026-05-2413 分鐘閱讀

`class` 的進階特性：`static` 方法與 Public Instance Fields

說明 `static` 關鍵字如何將方法直接掛在類別函式物件上而非 `prototype`，以及 ES2022 新增的 public instance fields 如何讓每個實例自動帶有預設屬性，並對照三種 class 內部寫法的底層位置。

JavaScript Hard Parts v3

#JavaScript #OOP #Prototype #Class #frontendMasters #javaScriptTheHardPartsV3

2026-05-2311 分鐘閱讀

解法三的問題與 `class` 語法糖：解法四

說明解法三遺漏 `new` 時的潛在錯誤與命名慣例的不嚴謹，並介紹 ES2015 的 `class` 語法如何在不改變底層機制的前提下，將建構函式與方法定義整合進同一個結構。

JavaScript Hard Parts v3

#JavaScript #Class #Prototype #OOP #frontendMasters #javaScriptTheHardPartsV3

2026-05-2310 分鐘閱讀

`new` 關鍵字的完整執行流程

逐步拆解 `new` 關鍵字在呼叫建構函式時自動完成的三個步驟，並與解法二的手動流程對照，說明底層的原型鏈機制分毫未變。

JavaScript Hard Parts v3

#JavaScript #Prototype #OOP #frontendMasters #javaScriptTheHardPartsV3

2026-05-229 分鐘閱讀

解法三：`new` 關鍵字與函式的雙重身份

介紹 `new` 關鍵字如何自動化物件建立、原型連結與回傳三個步驟，以及函式在 JavaScript 中同時具備函式與物件兩種身份，並說明 `prototype` 屬性與 `[[prototype]]` 的差異。

JavaScript Hard Parts v3

#JavaScript #Prototype #OOP #frontendMasters #javaScriptTheHardPartsV3

2026-05-2211 分鐘閱讀

方法內的巢狀函式與箭頭函式的 `this` 綁定

說明為何普通函式在方法內部被呼叫時 `this` 會跑掉，並比較 `that = this` 這個舊式 hack 與箭頭函式的詞法綁定如何各自解決問題，最後整理解法二的優缺點。

JavaScript Hard Parts v3

#JavaScript #Prototype #OOP #frontendMasters #javaScriptTheHardPartsV3

1234567891011121314

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