JS學習筆記#19 | 提升(Hoisting)

更新 發佈閱讀 3 分鐘


什麼是提升?

在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。

關鍵點

  1. 只提升宣告,不提升賦值
    • 變數的宣告(比如 var x;)會被提升,但賦值(比如 x = 5;)不會。
    • 函數宣告整個會被提升,包括函數名稱和內容。
  2. 適用於 var,不完全適用於letconst
    • var 宣告的變數會被提升,並初始化為 undefined
    • letconst 也會被提升,但不會初始化,處於「暫時性死區」(Temporal Dead Zone),在宣告前使用會報錯。
  3. 函數宣告 vs 函數表達式
    • 函數宣告(function foo() {})會完整提升,可以在宣告前呼叫。
    • 函數表達式(var foo = function() {})只有變數部分提升,賦值不會提升,所以宣告前呼叫會出錯。

範例解析

範例 1:變數提升

console.log(x); // 輸出:undefined
var x = 5;
console.log(x); // 輸出:5

實際執行時,JavaScript 會把 var x 提升到頂部,但 x = 5 留在原地。也就是說

var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5


範例 2:letconst的行為

console.log(x); // 報錯:ReferenceError
let x = 10;

console.log(y); // 報錯:ReferenceError
const y = 10;

被提升,但未初始化,宣告前使用會進入暫時性死區。


範例 3:函數提升

foo1(); // 輸出:Hello
function foo1() {
console.log("Hello");
}

foo2(); //TypeError: foo2 is not a function
var foo2 = function () {
console.log("Hello");
}

函數宣告(Function Declaration)整個被提升,所以可以在宣告前呼叫。

函數表達式(Function Expression)使用 var 所以只有變數名稱 foo2 被提升,賦值留在原地,所以宣告前調用會失敗。


注意事項

  • 避免依賴提升:雖然提升是語言特性,但為了程式碼可讀性,最好在變數或函數使用前先宣告。
  • 作用域影響:提升只在當前作用域內生效,比如函數內的宣告不會提升到全域。


小結

提升是 JavaScript 的獨特機制,理解它能幫助你避免常見錯誤(如 undefined 或 ReferenceError)。

重點:var 提升且初始化為 undefined,let 和 const 有暫時性死區,函數宣告完全提升。



留言
avatar-img
留言分享你的想法!
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
每次都很煩惱交換禮物要送什麼嗎?這次分享五款千元以下的質感好物,有香氛、海綿寶寶積木、質感可蒸可微波便當盒、吉卜力造型毛巾和實用包款,讓你輕鬆挑選聖誕節禮物💝
Thumbnail
每次都很煩惱交換禮物要送什麼嗎?這次分享五款千元以下的質感好物,有香氛、海綿寶寶積木、質感可蒸可微波便當盒、吉卜力造型毛巾和實用包款,讓你輕鬆挑選聖誕節禮物💝
Thumbnail
嗨大家!最近過得好嗎?我好久沒發文了!😀 正在進行一個月的歐洲旅行,這次橫跨三個國家,也發生不少有趣的事,接下來也會陸續整理發佈~ 今天想分享的是旅行中必備的好物,我也在旅途中親自進行實測, 希望透過這篇的購買清單,幫助到即將要規劃旅行的你:)
Thumbnail
嗨大家!最近過得好嗎?我好久沒發文了!😀 正在進行一個月的歐洲旅行,這次橫跨三個國家,也發生不少有趣的事,接下來也會陸續整理發佈~ 今天想分享的是旅行中必備的好物,我也在旅途中親自進行實測, 希望透過這篇的購買清單,幫助到即將要規劃旅行的你:)
Thumbnail
大家都知道要補充膠原蛋白,但步入中年後的我,肌膚的變化不只是「流失變快」,連狀態也開始慢慢改變。 後來才明白,原來膠原蛋白的補充不只要「吃對」,更要「吃對時間」。 就像肌膚保養會分成早晚程序,膠原的補充其實也需要「分時」進行,才能更貼近需求,效果也更好。 BEAUTY CLUB 讓我養成了「早
Thumbnail
大家都知道要補充膠原蛋白,但步入中年後的我,肌膚的變化不只是「流失變快」,連狀態也開始慢慢改變。 後來才明白,原來膠原蛋白的補充不只要「吃對」,更要「吃對時間」。 就像肌膚保養會分成早晚程序,膠原的補充其實也需要「分時」進行,才能更貼近需求,效果也更好。 BEAUTY CLUB 讓我養成了「早
Thumbnail
發現每天固定一個小動作,肌膚整體狀態真的會更穩定,照鏡子的心情也跟著好起來。 早上我習慣吃一包 TIMESEAL 早安膠原蛋白,粉末狀、很好入口,使用小分子技術,搭配維生素C與專利原料 ( 雙胜肽膠原、PANMOL® NADH)。對我來說,就是先把一天的彈潤感打好底,也讓整天狀態更有精神。 晚
Thumbnail
發現每天固定一個小動作,肌膚整體狀態真的會更穩定,照鏡子的心情也跟著好起來。 早上我習慣吃一包 TIMESEAL 早安膠原蛋白,粉末狀、很好入口,使用小分子技術,搭配維生素C與專利原料 ( 雙胜肽膠原、PANMOL® NADH)。對我來說,就是先把一天的彈潤感打好底,也讓整天狀態更有精神。 晚
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
Thumbnail
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News