Overview 什麼是提升 (Hoisting) 提升 (Hoisting) 的運作方式 文章中沒解釋的進階知識 什麼是提升 (Hoisting) 變數與函式在程式碼執行之前被『Hoisting』到作用域的頂部，這樣可以確保在執行程式時，所有變數與函式宣告都已經準備好可以使用 Hoisting 的設計主要是為了讓開發者在撰寫程式碼時更有彈性，最常見的是函式之間可以互相呼叫而不會導致錯誤 提升 (Hoisting) 的運作方式 JavaScript 是一個解釋型語言，解釋型語言指的是透過直譯器 (Interpreter) 逐行讀取並執行程式碼的語言，不過現今的 JavaScript 是透過 V8 引擎進行處理，V8 引擎提供『即時編譯(Just-In-Time Compilation, JIT)』，過程並不是逐行解釋程式碼而是先掃描整個程式碼，進行語法解析並生成機器碼(Bytecode)，在程式碼執行過程 (runtime) 會監控執行比較頻繁的程式碼將其編譯成機器碼以提升運行效能 現行的框架多數提供『提前編譯 (Ahead-Of-Time Compilation, AOT)』讓程式碼在部署前就提前編譯成機器碼，透過機器碼提升程式碼”啟動”的速度 JIT 側重於運行時的性能提升：因為會在執行過程中動態針對頻繁執行的程式碼進行深度優化，使長時間運行的應用程式 (Node.js Server) 效能更高 AOT 側重於啟動時的速度提升：因為提前將程式碼轉為機器碼，適合在意載入時間的應用程式 (網頁與行動裝置) Hoisting 發生於 JavaScript 編譯階段，而不是執行階段 當 JavaScript 編譯器掃描程式碼時，會將所有變數宣告和函式宣告『Hoisting』至作用域的頂部，這些宣告都會被記錄到記憶體中，此過程即為『Hoisting』，需注意的是，Hoisting 只 Hoisting 變數的宣告不 Hoisting 賦值，因此程式碼執行前 var 宣告的變數會被初始化為 undefined let 和 const 則會因『暫時性死區 (Temporal Dead Zone, TDZ)』的原因，若在宣告前使用該變數，會觸發 ReferenceError 參考以下實際例子的 Hoisting，主要是傳達概念，實際運作會更複雜 使用 var 的變數在宣告前就呼叫 編譯前

這是以前在 GitHub 寫的文章，現在搬遷過來，所以有一些歷史 XD 邊界重疊 (Margin Collapsing) 當兩個block都有設定邊界，且兩個邊界重疊時，只留下最大值的邊界，這個情況就是邊界重疊 但設有float, position: absolute的元件不會發生上述的事情 有三個情況會造成邊界重疊 同一層相鄰時若設定邊界時，上下邊界會造成重疊 父元素與第一個或最後一個子元素若設定邊界時，上下邊界會造成重疊 兩個元素中間有空的元素時，若這兩個元素有設定邊界，上下邊界會造成重疊 同一層相鄰時若設定邊界時，上下邊界會造成重疊 // .scss .mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; } <!-- html --> <section> <div class="block mb-16">margin-bottom: 16px</div> <div class="block mt-16">margin-top: 16px</div> </section> 雖然兩個都設定margin，但因為相鄰，所以上下邊界會重疊， 就不是預想的32px而是16px了，以下圖例，綠色為margin的範圍(16px) 父元素與第一個或最後一個子元素若設定邊界時，上下邊界會造成重疊 // .scss .mt-16 { margin-top: 16px; } <!-- html --> <section class="mt-16"> <div class="block mt-16">margin-top: 16px</div> </section> 當父元素有設定margin, 第一個元素也有設定margin， 父元素為block且沒有設定border, padding, overflow時， 就會變成第一個元素與父元素共享同個margin，所以不會分開來，就重疊了， 以下圖例，綠色為margin的範圍(16px) 兩個元素中間有空的元素時，若這兩個元素有設定邊界，上下邊界會造成重疊 // .