JavaScript 入門:提升 Hoisting 是什麼?

更新 發佈閱讀 5 分鐘
JavaScript Hoisting 提升

JavaScript Hoisting 提升

什麼是提升 Hoisting

Hoisting 指的是,JavaScript 在執行程式碼之前,先掃瞄整個作用域,並將宣告拉到作用域最上方的行為。

Hoisting 只會提升宣告,不會提升賦值。

但是一定要注意,前面提到的「拉到上方」並不真正的搬動程式碼!! 因為 JavaScript 在執行前會先建立執行環境(Execution Context),這時需要先替變數與函式配置記憶體空間,因此會出現這種「宣告被搬到前面」、「宣告的程式碼看起來可用」的狀況。


變數宣告的提升

var 的提升

範例

console.log(a);
var a = 10;

結果

undefined

這個例子中,程式會正常執行不報錯,但是印出 undefined

因為 var 宣告的 a 被提升了,而賦值的程式碼還留在原地, JS 執行起來會像是:

var a; // 宣告被提升
console.log(a); // 嘗試印一個還沒被賦值的 a
a = 10; // 賦值

這也是為何會出現 undefined 的原因。


let/ const 的提升

let 範例

console.log(b); 
let ​b = 10;

let 結果

ReferenceError: Cannot access 'b' before initialization

const 範例

console.log(c); 
const ​c = 10;

const 結果

ReferenceError: Cannot access 'c' before initialization

從結果看來,不論是 letconst,兩者在宣告前嘗試先存取變數都會出現錯誤,這是因為 letconst 雖然在提升時期都會被建立,但是並沒有被初始化,這段期間也被稱做進入暫時死區 temporal dead zone。


函式宣告的提升

函式宣告式 Function declaration 的提升

函式宣告式指的是用 function 關鍵字宣告的有名函式。函式宣告式會被提升,所以可以在程式中的任一地方呼叫,如下方範例:

sayHi();
function sayHi(){
console.log("Hi");
}

這段程式的結果可以正確印出 "Hi" ,因為整個函式都被提升。

函式表達式 Function expression 的提升

另一種宣告函式的方法叫做函式表達式,意思是將函式賦值到宣告的變數。在這種宣告方式下,指有被宣告的變數會被提升,函式內容還停留在原地,因此會出現錯誤。

但是具體報錯的訊息會取決自接受的變數類型

sayHi();

var sayHi = function(){
console.log("Hi");
}

以 var 的範例來說,會出現:

TypeError: sayHi is not a function

而將變數替換為 let/const 宣告,則會出現:

ReferenceError: Cannot access 'sayHi' before initialization

總結

JavaScript 在建立執行環境時會將變數、函數的宣告邏輯移到作用域頂端,這樣的情況稱作提升 Hoisting。

  • 變數、函式的宣告都會有提升情況
  • 只有宣告會提升,「賦值」不會被移動
  • var 在提升時會初始化成 undefined
  • let/const 不會初始化,會進入暫時死區 temporal dead zone
  • 函式宣告式 function declaration 會被完整提升,函式表達式則只有宣告會被提升

參考

  1. 什麼是提升 (Hoisting)?
  2. 在 JavaScript 中用 var, let, 以及 const 有什麼差別?什麼時候該用哪個?
  3. [筆記]-JavaScript 提升(Hoisting)是什麼?關於提升的5個觀念
留言
avatar-img
Elaine 粼粼的林林總總
7會員
36內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
2026/02/06
閉包 (Closure) 是 JavaScript 核心觀念之一,指函式與其建立時的詞法環境結合。因為詞法作用域在宣告時就決定變數存取範圍,即使外層函式執行完畢,內部函式仍能存取外部變數。本文透過實例解析閉包原理與實際應用。
2026/02/06
閉包 (Closure) 是 JavaScript 核心觀念之一,指函式與其建立時的詞法環境結合。因為詞法作用域在宣告時就決定變數存取範圍,即使外層函式執行完畢,內部函式仍能存取外部變數。本文透過實例解析閉包原理與實際應用。
2026/02/05
開發 JavaScript 程式時,了解作用域的概念是非常重要的事情。本篇文章介紹了 JS 的三種作用域:全域作用域、函式作用域、區塊作用域以及作用域鏈的概念。
2026/02/05
開發 JavaScript 程式時,了解作用域的概念是非常重要的事情。本篇文章介紹了 JS 的三種作用域:全域作用域、函式作用域、區塊作用域以及作用域鏈的概念。
2026/02/04
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
Thumbnail
2026/02/04
為什麼 JavaScript 中的字串無法修改?為什麼複製變數後,改變其中一個會影響另一個?本文將深入解析 JavaScript 的原生值 (primitive values) 與物件 (objects) 的運作機制,說明傳值與傳參考的差異,避免非預期的程式行為,提升開發效率!!
Thumbnail
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
什麼是執行環境(Execution Context)? 簡單來說,執行環境是 JavaScript 程式碼執行時所在的「環境」。 它決定了程式碼如何被解析和執行,並管理變數、函數以及作用域(scope)的存取。 每當程式碼執行時,JavaScript 引擎會建立一個執行環境。
Thumbnail
什麼是執行環境(Execution Context)? 簡單來說,執行環境是 JavaScript 程式碼執行時所在的「環境」。 它決定了程式碼如何被解析和執行,並管理變數、函數以及作用域(scope)的存取。 每當程式碼執行時,JavaScript 引擎會建立一個執行環境。
Thumbnail
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
JavaScript 的事件處理是網頁開發中的重要部分,本文將介紹兩個常用的方法:event.stopPropagation() 與 event.preventDefault(),並簡要說明它們的作用與使用情境。
Thumbnail
JavaScript 的事件處理是網頁開發中的重要部分,本文將介紹兩個常用的方法:event.stopPropagation() 與 event.preventDefault(),並簡要說明它們的作用與使用情境。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
在 JavaScript 中,變數是一個儲存值的容器,可用於管理和操作資料。變數可以透過 let、const 和 var 進行宣告。選擇適當的變數宣告方式是確保程式碼可讀性和可維護性的關鍵。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News