持續！修鍊之路

所有分類

生活亂談

Hi 👋 我是許文修歡迎來到我的部落格

《1917》最佳影片與導演獎熱門首選 | 電影雜談

Deep JavaScript Foundations v3

箭頭函式的詞彙 `this`：物件不是 Scope，以及何時該用箭頭函式

箭頭函式與詞彙 `this`：沒有自己的 `this` 的函式

預設綁定：`this` 的第四種做法與總覽

`new` 關鍵字：第三種 `this` 綁定規則

隱式綁定與明確綁定：`this` 的前兩種規則

`this` 關鍵字：由呼叫方式決定的動態上下文

ES6 模組語法：原生模組支援與 Node.js 的相容之路

模組模式（Module Pattern）：用閉包實現封裝

閉包關閉的是變數，不是值：迴圈閉包的常見陷阱

閉包（Closure）：函式記憶自身範疇的能力

`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

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）

Advanced Web Dev Quiz

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 資格

程式筆記

聰明的處理前端表單 | FormData API | handling-form-without-any-dependencies

Teachable 的 Sidebar 你的時辰到了 | Tampermonkey Userscript

gulp-gh-pages deploy 失敗QQ | 程式筆記 - 001

學習經歷

我該早點學的前端技術|不學無術也該有個限度

線下不能群聚? 那線上總可以吧! 200人六角線上前端切版直播課程

JS地下城

幹嘛不自己上網查就好的 JavaScript 世界時鐘 | JS地下城 - 004

不負責任的 JavaScript 計算機 | JS地下城 - 003

俄羅斯方塊謎題 | JS地下城 - 番外篇 - 001

CSS、JS切個時鐘吧 | JS地下城 - 002

用 JavaScript 切出九九乘法表 | JS地下城 - 001

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

Photo by Aram on Unsplash