JavaScript面試考題：Hoisting是什麼？
更新於 發佈於 閱讀時間約 5 分鐘
在JS中很重要的觀念就是hoisting，中文叫做「提升」。先來看看以下程式碼：
var a ='Hello World!'
function b(){
console.log('Called b!')
}
b();
console.log(a)
可想而知會印出：
//Called b!
//Hello World!
那如果將b()和console.log(a)放到程式碼前面呢？
b();
console.log(a)
var a ='Hello World!'
function b(){
console.log('Called b!')
}
JS都是逐行逐行執行的，照理來說函式b沒有被宣告就被執行，應該會報錯，但事實不然，b()跟console.log(a)都不會報錯，b()會執行程式，a則會報個undefined：
//Called b!
//undefined
這是因為hoisting。
網路解釋的hoisting
比較常看到的解釋是說hoisting會在執行時，把變數和函式提升到程式碼的頂部：
function b(){
console.log('Called b!')
}
var a;
b();
console.log(a)
var a ='Hello World!'而變數又比較不一樣，它只會提升var a ，不會提升後面的值’Hello World!’，於是JavaScript 全攻略：克服 JS 的奇怪部分的老師Anthony Alicea提出不同的觀念想法，我覺得也蠻好記的。
Anthony Alicea的hoisting
首先我們必須先明白，電腦並不是直接執行我們寫的JS code，而是透過一個轉譯器「syntax parser 語法解析器」來檢查我們寫的程式碼，並轉譯成電腦懂的語言讓電腦去執行。
轉譯給電腦後，JS會製造出一個execution context執行環境，被執行的程式碼會被包起來裝在執行環境中，而執行環境分為兩個階段：
- Creation Phase 創造階段
- Execution Phase 執行階段
在Creation Phase時，JS會自動幫變數和函式製造出記憶體空間，所以在執行前，JS已經知道有這個變數a還有函式b()。
但在執行前，JS只知道有這個變數a，還不知道a的值是多少，設值是執行後才會知道的，所以JS會給undefined這個預設值。
Creation Phase 創造階段
JS：哦哦我知道有a這個變數，也知道b這個函式！b要執行的是console.log(‘Called b!’)，但我還不知道a會是多少，而a的預設值是undefined。
b();
console.log(a)
var a ='Hello World!'
function b(){
console.log('Called b!')
}
// Called b!
// undefined
Execution Phase 執行階段
JS：我知道a是多少了！！是Hello World!
b();
console.log(a)
var a ='Hello World!'
function b(){
console.log('Called b!')
}
console.log(a)
// Called b!
// undefined
// Hello World!
沒宣告就執行→還是會報錯
b();
console.log(a)
function b(){
console.log('Called b!')
}
//Called b!
//Uncaught ReferenceError: a is not defined
因為根本沒有宣告a，JS的記憶體中沒有a這個變數。
undefined跟ReferenceError: a is not defined 有何不同？
undefined：代表這個值還沒被設定，而undefined是JS中特殊的值(value)
var a;
console.log(a)
if(a === undefined){
console.log('a is undefined')
}else{
console.log('a is defined')
}
// undefined
// a is undefined
a === undefined
如果沒有var a;
console.log(a)
if(a === undefined){
console.log('a is undefined')
}else{
console.log('a is defined')
}
// Uncaught ReferenceError: a is not defined
因為JS在記憶體中找不到a，所以就會報錯。
undefined是JS中特殊的value。
老師建議沒事不要把執行放在宣告前，很容易搞錯，還是按照順序就好嚕；
var a ='Hello World!'
function b(){
console.log('Called b!')
}
console.log(a)
b()
// Hello World!
// Called b!
至於要用網路上廣泛的解釋方式還是老師的解釋，我是覺得沒差，反正知道結果就好了。
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
介紹如何使用 JavaScript 中的陣列基本增刪元素方法，包括新增、刪除和替換元素的詳細說明。介紹的主要方法有 unshift、push、shift、pop、splice 和 slice，並解釋它們的使用場景和返回值。
最近公司發放了2025年行事曆（以下為示意圖非實際行事曆）：
看起來很正常的行事曆，但問題就出現在了週別計算。
歸納後某公司的規則如下：
a. 1月1日那一週如果屬於今年的日數大於等於4日，則為第一週W1。
b. 1月1日那一週如果屬於今年的日數小於4日，則為去年最後一週W52或W5
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
這些章節的目的是為了介紹JavaScript中的各種數據類型，包括基礎類型和物件類型，以及如何將數據從一種類型轉換為另一種類型。此外，還介紹了如何創建自定義類型，以及如何使用JavaScript中的陣列、集合和字典。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
介紹如何使用 JavaScript 中的陣列基本增刪元素方法，包括新增、刪除和替換元素的詳細說明。介紹的主要方法有 unshift、push、shift、pop、splice 和 slice，並解釋它們的使用場景和返回值。
最近公司發放了2025年行事曆（以下為示意圖非實際行事曆）：
看起來很正常的行事曆，但問題就出現在了週別計算。
歸納後某公司的規則如下：
a. 1月1日那一週如果屬於今年的日數大於等於4日，則為第一週W1。
b. 1月1日那一週如果屬於今年的日數小於4日，則為去年最後一週W52或W5
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
這些章節的目的是為了介紹JavaScript中的各種數據類型，包括基礎類型和物件類型，以及如何將數據從一種類型轉換為另一種類型。此外，還介紹了如何創建自定義類型，以及如何使用JavaScript中的陣列、集合和字典。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行