【自學程式】Hoisting 到底是什麼？前端常見面試考題
Hoisting 可以說是 ES6 問世之後，去面試還是會爾偶被問到的面試考題，雖然 Hoisting 離 Modern JavaScript 的技術有點距離，實作上幾乎不太會用到，但透過了解 Hoisting 的概念，可以對這門語言有更深的了解與掌握度。
在聊 Hoisting 是什麼之前，我們要先知道 Hoisting 是由什麼議題延伸出來的討論，建議可以先閱讀下文，了解 var、const、let 的差異，再來閱讀本篇文章會比較有效率：
若你已經對 JavaScript 變數宣告的作用域有所了解，就可以繼續看下去了：
究竟什麼是 Hoisting 呢？
Hoisting 中譯為「提升」，意指 JavaScript 在執行時，會將變數、函式陳述式及 class 在執行階段（execution phases）前、創造階段（creation phases）時，先行指向記憶體位置的行為。
就程式碼面而言，被提升的變數、函式陳述式及 class 的宣告會被提升至作用域 （scope）的最上方，舉例來說：
有沒有想過為什麼在 a 被宣告前，console.log(a) 依然取得到值（undefined）呢？
實際上，上方的程式碼從 JavaScript 運作開始到結束，經歷了以下階段：
而變數 a 在宣告時被提升到作用域最後上方的現象就稱為 Hoisting，但要注意的是 Hoisting 只是一個 JavaScript 執行時的現象，並沒有在 ECMA ES6 中被規範、提及。
基本上變數、函式、class 皆有 Hoisting 的狀況，但還是會依照宣告的方式不同而有所差異。
函式的 Hoisting 行為
首先讓我們先來看看有關函式的 hoisting 行為，這邊要注意的是，只有函式陳述式（function statement）有 Hoisting 的行為，函式表達式（function expression）是沒有的，舉例來說：
為什麼「catName」這個函式可以在被宣告之前就可以被呼叫呢？
因為函式陳述式在 JavaScript 會被提升，所以實際上執行的順序實際上是這樣的：
變數的 Hoisting 行為
變數的提升可以分為 var 與 const、let 兩種，第一種我們在文章的開頭介紹過了，讓我們來看看 const 與 let 的 Hoisting 行為：
與 var 的 Hoisting 行為不同，const、let 在創造階段時，並沒有像 var 一樣擁有預設值，即便他們也有 Hoisting 的行為，但呈現方式卻不同。
當使用 const、let 宣告變數時，無法在變數宣告前取用變數，連 undefined 都不會回傳，這個現象官方稱為 TDZ（Temporal Dead Zone）。
所以這裡需要注意，ES6 之後，通常我們不會在變數宣告前取用它，一來是程式的嚴禁度，二來是 ES6 以後的新發布的本版也不建議這麼設計程式。
即便會報錯，但實際上 const 、let 還是跟 var 一樣有 Hoisting 的狀況， 只差在後者帶有 undefined 的預設值，前者沒有。
Class 的 Hoisting 行為
在 ES6 時，JavaScript 引進了類別概念（class），與函式有相同的狀況，類別陳述式（class statement）具有 Hoisting 的概念，但表達式就沒有了。
但這邊要注意一件事：JavaScript 的類別並不會主動初始化，如果在 class 的宣告前取用該類別，還是會報錯：
類別 Hoisting 的狀況其實也跟 const、let 很類似，明明有 Hoisting 的行為，但卻因為程式設計嚴謹度的關係，在宣告前無法取得該類別。
避免執行錯誤的解法
基本上近期的開發者，幾乎已經棄用的 var，所以完全不用考量到 var Hoising 的狀況。
那我們該如何在撰寫程式時，避免掉 Hoisting 或是 ReferenceError 的狀況呢？
其實就是「確保函式、變數、類別被宣告後再取用」，即可避免掉 Hoisting 可能造成的錯誤了。
由於文章內還有額外提到陳述式及表達式的一些相關做法，希望之後有機會可以再來跟大家分享其中差異。
希望透過今天的文章，大家可以更加了解為什麼 var 會被棄用，及程式碼排序的重要性。
關於 Hoisting 你有什麼想要跟我分享的嗎？歡迎下方留言與我分享！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
此篇文章會顯示動態置底廣告
為什麼會看到廣告
436會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
本章節旨在介紹TypeScript中的函數，包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節，讀者可以學習到如何在TypeScript中使用不同的方式來定義函數，如函數聲明、函數表達式、箭頭函數和匿名函數等。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ ES6 變數宣告介紹：
在ES6中，推薦使用let和const取代原有的var來宣告變數。
※ var的特點：
勢力範圍（scope）只有兩種：function、global（全域部分）。
勢力範圍（scope）指的是宣告變數的範圍，能夠被有效的使用的範圍。
可以在宣告變數之前就使用。
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
本章節旨在介紹TypeScript中的函數，包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節，讀者可以學習到如何在TypeScript中使用不同的方式來定義函數，如函數聲明、函數表達式、箭頭函數和匿名函數等。
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ ES6 變數宣告介紹：
在ES6中，推薦使用let和const取代原有的var來宣告變數。
※ var的特點：
勢力範圍（scope）只有兩種：function、global（全域部分）。
勢力範圍（scope）指的是宣告變數的範圍，能夠被有效的使用的範圍。
可以在宣告變數之前就使用。
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）