Hoisting 概念筆記

source: unsplash

最近學到JavaScript的Hoisting概念，在這邊記錄一下學到的內容。

function 和 var 的Hoisting特性

1. 首先，在JavaScript中function的提升優先權是高於var的。

這個意思是function定義的內容會放在比var 宣告的地方還要更前面。

var name = 'Tom';
function callName(name)
{   
   console.log(name);
}
// 雖然，上面的內容看起來name的宣告是在callName函式前面，但對編譯器來說，其實是
// callName函式的定義是放在name宣告的前面

2. 將程式碼區分成編譯時期 與 執行時期，來分清楚var 和 function是在什麼時候做宣告，又在什麼時候被賦值，又在什麼時候被呼叫

function func1()
{
   console.log(num);
}
var num =1;
function func2()
{
  var num = 2;  
  console.log(num); 
  func1();
} 
func2();
//----------------以下拆解成編譯時期 和 執行時期----------------//
//-- 編譯時期---//
function func1()
{
   console.log('num='+num);
}
function func2()
{
  var num = 2;  
  console.log('num='+num); 
  func1();
}
var num;
//-- 執行時期---//
num = 1; 
func2();  
// 以上的執行結果，會先呈現num=2 再呈現 num=1
// 因為，在呼叫func2()，會先呈現在func2()內的區域變數的num，所以是2，
// 當換呼叫func1()時，此時，num會吃到全域變數的num=1的數值。

以上紀錄一下var 和 function 在 JavaScript的Hoisting特性 與 編譯器在編譯時期與執行時期是怎麼操作它們的。