[ js 筆記 ] 什麼是 hoisting?


Posted by ChloeLin on 2022-03-01

我們在 ECMAScript® 2015 Language Specification 找不到提升(Hoisting)這個術語。那 hoisting 是什麼意思呢?我們都知道 Javascript 是「單執行續 (Single-Thread)」的語言,會一行一行解析事件,一次只做一件事情。而 hoisting 看起來是將變數和函式宣告,移動到程式的區塊頂端,這樣聽起來不是很矛盾嗎?實際上 Javascript 的運作過程中,變數和函數的宣告會在編譯階段就被放入記憶體,但實際位置和程式碼中完全一樣。

var 使用

console.log(a)
a = 1
var a

我在最後一行才宣告變數 a ,印出 undefined 而不是 ReferenceError: a is not defined 就是 hoisting 的作用效果。

var a
console.log(a)
a = 1

與這樣寫的結果是一樣的。

用在函式也同樣可以在程式碼宣告該函式之前使用它。

name("Chloe")

function name(name) {
  console.log("My name is " + name);
}

// 印出:"My name is Chloe"

const 與 let 使用

在 ES6 有兩個新的宣告變數關鍵字:const 與 let。const 與 let 同樣有 hoisting 的效果,最主要的差別是 const 與 let 要先進行宣告,否則會出現錯誤。

console.log(a)
a = 1
let a

結果會跟你說ReferenceError: Cannot access 'a' before initialization,而不是ReferenceError: a is not defined。他跟你說:我在運行的過程中有找到 a ,但是請在使用前先宣告 a 。這樣的好處是什麼?先宣告再使用,讓程式碼看起來更明瞭!

更詳細的 hoisting 可以參考 huli 大大的 我知道你懂 hoisting,可是你了解到多深?


#javascript #Front-End #hoisting







Related Posts

EJS - Daily Journal Project

EJS - Daily Journal Project

[08] JavaScript 入門 - 模組、this

[08] JavaScript 入門 - 模組、this

CSS Relative Unit: rem & em

CSS Relative Unit: rem & em


Comments