[JavaScript] - Hoisting

undefined 與 not defined

在了解 Hoisting 之前，我們先稍微了解一下 undefined、not defined 的差別：

• undefined : 記憶體已有準備位置，但還未定義型態，或是沒有指定的屬性
• not defined : 還沒準備空間

Hoisting 實戰

我們直接印出還未宣告的 a:

1

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

若我們宣告並印出來看看結果：

1
2
3

console.log(a);
var a;
// undefined

根據上面的結果，我們在學習程式語言時，都知道程式「由上而下」的讀取，為何在執行第一行時錯誤訊息卻不是not defined ?

這就是因為有 Hoisting 「提升」的緣故，其中第二行宣告了，但因為 Hoisting 的原因被「提升」到了最上面，

竟然被提升了，那我們給值看看：

1
2
3

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

結果還是 undefined ，這邊我就可以知道只有變數宣告會被「提升」，而賦值不會，到這邊理解上應該是長這樣：

1
2
3

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

那我們看看另一個例子：

1
2
3

var a = 50;
var a ;
console.log('a:'+a); // a:50

a 的結果卻是 50 而不是 undefined，根據之前的例子所了解的概念，我們應該這樣想像這個例子其實是下方的樣子，就可以了解為何不是undefined：

1
2
3
4

var a ;
var a ;
a = 50 ;
console.log('a:'+a); // a:50

接著我們看看若有同名function的例子：

1
2
3

console.log(a); //ƒ a(){}
var a ;
function a(){}

透過這個例子和之前的例子我們可以了解到：

• function 宣告與變數宣告都會提升
• 但提升的優先權:function 宣告 > 變數的宣告
• 賦值不會提升

參考：我知道你懂 hoisting，可是你了解到多深？

tags: JavaScript Hoisting