iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

重新開始 JavaScript系列 第 8

[Day7] 提升

何謂提升(Hoisting)?

提升(Hoisting) 其實主要是為了釐清 JavaScript 的運作所提出的觀念,在 ECMAScript 並未提出這個專有名詞,而所謂的提升,就是先將函式變數宣告先提到程式碼最上面的動作,再接著執行程式碼

執行環境的階段

JavaScript 會在執行環境中運行程式碼,而在建立一個執行環境時可以分為兩個階段:

  • 創造階段
    • 先將所有函式載入,且已可以運行
    • 再取出程式碼中的變數宣告,並在記憶體上預留變數空間,此時不會賦予變數值,系統會先給予一個初始值 undefined
  • 執行階段
    • 依序執行程式碼,此時可賦予變數值

在創造環境階段優先把函式與變數的記憶體空間準備好,就叫做 提升 Hositing

變數的提升

同上面所述,在創造階段時,會將程式碼中所有變數宣告提到最前面,並在記憶體中預留空間給變數後,系統會先給予一個 undefined 的初始值,等到了執行階段,會依序執行剩下的程式碼,這時候才會賦予變數值,範例如下:

範例1:

var nickName = 'Carol';
console.log(nickName); // Carol

運行過程:

// 1. 創造階段

// 先宣告變數 nickName,在記憶體中預留空間,預設值為 undefined
var nickName;

// 2. 執行階段

// 賦予變數 nickName 值
nickName = 'Carol';

// 顯示變數 nickName 值
console.log(nickName); // Carol

範例2:

console.log(nickName);
var nickName = 'Carol';

運行過程:

// 1. 創造階段

// 先宣告變數 nickName,在記憶體中預留空間,預設值為 undefined
var nickName;

// 2. 執行階段

// 顯示變數 nickName 值
console.log(nickName); // undefined

// 賦予變數 nickName 值
nickName = 'Carol';

範例3:

因為系統找不到 變數 nickName,所以顯示錯誤訊息 Uncaught ReferenceError: nickName is not defined

console.log(nickName);
// Uncaught ReferenceError: nickName is not defined

undefinedis not defined 差異可在 [Day6] 'undefined' vs 'not defined' 查看更多內容

參考文獻

六角學院 - JavaScript 核心篇

MDN - 提升(Hoisting)


上一篇
[Day7] 提升
下一篇
[Day8] JavaScript 的記憶體回收機制
系列文
重新開始 JavaScript32

尚未有邦友留言

立即登入留言