從兩段簡單的程序說開去

有這麼兩段小程序。

var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo);

var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    var goo = "world";
  }
}
foo();
console.log(goo);

毫無疑問，把這兩段小程序貼到瀏覽器裏跑一下，能很快地獲得答案。
因此關上瀏覽器，你以爲他們的答案分別是什麼，爲何？

---

答案

在第一段小程序中，沒有用var去聲明變量goo，這在javascript中叫隱式聲明，隱式聲明是會聲明一個全局變量的，因此 goo = "world"; 將會覆蓋以前聲明的全局變量的值。
因此第一題的答案是world。

而在第二段小程序中，因爲在javascript中，var 表達式的值在運行以前將會被轉化，JavaScript將會把 var 表達式和 function 聲明提高到當前做用域的頂部。也就是說，第二段小程序其實等同於：

var goo = "hello";
function foo(){
  var goo;//var表達式提高到當前做用域的頂部
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo);

在第二段小程序中，因爲條件語句的控制，也許程序永遠不會執行到 var goo = "world" 這一句，可是因爲使用了var表達式，就會致使goo變量提高到當前做用域的頂部，進而使goo聲明爲一個局部變量，這樣一來，局部變量賦值並不會影響全局變量，因此第二段程序顯示「hello」。

兩段小程序，考考做用域和變量聲明提高（Hoisting），怎麼樣，答對了麼？