進擊JavaScript之（一）變量聲明提高

以下代碼輸出的結果是？

var num = 123;
function foo1(){
    console.log( num );    //undefined
    var num = 456;
   console.log( num );    //456
}
foo1();

Javascript代碼執行分爲兩個大步：

預解析的過程
代碼的執行過程

1.預解析與變量聲明提高

程序在執行過程當中，會先將代碼讀取到內存中檢查，會將全部的聲明在此進行標記，所謂的標記就是讓JS解析器知道有這個名字，後面在使用名字的時候不會出現未定義的錯誤。這個標記過程就是提高。

聲明：

名字的聲明，標識符聲明（變量名聲明）

• 名字的聲明就是讓解析器知道有這個名字
• 名字沒有任何數據與之對應

函數的聲明

• 函數聲明包含兩部分

• 函數聲明與函數表達式有區別，函數聲明是單獨寫在一個結構中，不存在任何語句，邏輯判斷等結構中

  function f() {}
  function func() { // 函數聲明
  } 
  if ( true ) {
      function func2 () {} //函數表達式
  }
  var f = function func3 () {}; //函數表達式
  this.sayHello = function () {}; //函數表達式
  var i= 1；
  function func4 () {}    // 函數聲明
      var j = 2;
  }

首先函數聲明告訴解析器有這個名字存在，該階段與名字聲明同樣
告訴解析器，這個名字對應的函數體是什麼

var num = 1;
function num () {
    alert( num );
}
num();    // 報錯

分析

1. 預解析代碼，提示名字

   • 首先提高名字num
   • 再提高函數名，可是名字已經存在，所以只作第二部，讓名字與函數體對應上
   • 結論就是 代碼中已經有一個函數 num 了

2. 開始執行代碼，第一句話從賦值語句開始執行

   • 給num賦值爲1
   • 覆蓋了函數
3. 調用num，因爲num中存儲的是數組1，所以報錯

2.代碼分析舉例

程序1

var num = 123;
function foo1(){
    console.log( num );    //undefined
    var num = 456;
    console.log( num );    //456
}
foo1();

1. 預解析，提高 num 名字和 foo1 函數
2. 執行第一句話：num = 123;

3. 執行函數調用

   • 函數調用進入函數的一瞬間也要進行預解析，此時解析的是變量名 num
   • 在函數內部是一個獨立的空間，容許使用外部的數據，可是如今 num 聲明同名，即覆蓋外面的
   • 執行第一句 打印num，沒有數據，undefined
   • 執行第二句 賦值：num = 456；
   • 執行第三句 打印num，結果456

程序2

if ( ！ 'a' in window ) {
    var a = 123;
}
console.log( a );

首先，預解析，讀取提高 a ，有一個名字 a 存在了

其次，in 運算符：判斷某一個字符串描述的屬性名是否在對象中

• var o = { name:'jim' }; 'name' in o，'age' in o

• 執行第一個判斷：! 'a' in window

  • 'a' in window 結果爲真
  • ！獲得假
• if內部的賦值不進行

最後，打印結果 a 的值爲 undefined

程序3

if ( false ) {
    function f1 () {
        console.log( 'true' );
     }
} else {
    function f1 () {
        console.log( 'false' );
     }
}
f1();

預解析：提高 f1 函數，只保留提高後的內容，因此打印是 false

執行代碼，第一句話就是一個空的if結構

if ( true ) {
} else {
}

執行函數調用，獲得 false

3.問題

function foo () } {}
var foo = function () {};

上面的語法是聲明，能夠提高，所以在函數上方也能夠調用

下面的語法是函數表達式，函數名就是foo ，他會提高，提高的不是函數體

函數表達式也是支持名字語法

var foo = function func1 () {};
func();

函數有一個屬性name，表示的是函數名，只有帶有名字的函數定義，纔會有name屬性值，不然是「」

• 可是，函數表達式的名字，只容許在函數內部使用，IE8能夠訪問
• （）能夠將數據轉化爲表達式

新的瀏覽器中，寫在if、while、do..while結構中的函數，都會將函數的聲明轉換成特殊的函數表達式
將代碼

if (...) {
    function foo () { ... }
}

轉換成

if (...) {
    var foo = function foo () { .... }
}

完。

---

推薦閱讀

• 進擊JavaScript之（二）詞法做用域與做用域鏈
• 進擊JavaScript之（三）玩轉閉包
• 進擊JavaScript之（四）原型與原型鏈