再次複習了一下作用域和預編譯的知識仔細的看了下老師視訊和部落格

學習到了一些關於預編譯和作用域的知識和大家分享一下！

眾所周知javascript是解釋性語言，主要特點為解釋一行執行一行。

而在js執行時會進行三件事：1語法分析  2.預編譯  3.解釋執行

    語法分析會在程式碼執行前對程式碼進行通篇檢查，以排除一些低階錯誤

    預編譯發生在程式碼執行的前一刻

    解釋執行顧名思義就是執行程式碼

我先給大家舉幾個預編譯的小例子：

                var a = 123;

console.log(a)；  此時他返回的值會是123；

   但如果我們調換位置：

                console.log(a);

                    var a = 123;      我們得到的結果便會是undefined。（由於js解釋性語言的原因，先執行console.log，而由於預編譯的原因瀏覽器並不會報錯）

如果我們在次嘗試不定義變數直接獲取：

                console.log(a);  此時我們會發現瀏覽器會進行報錯。//Uncaught ReferenceError: a is not defined

                                                                                                               這條語句提示我們a沒有定義

到這裡有些人會有疑問為什麼在console.log前，後和不定義a會有如此大的差別，這就是預編譯起到的作用

在具體講解預編譯之前要先幫大家瞭解幾點小知識，如下：

預編譯的前奏

   1. imply global 暗示全域性變數：即任何變數，如果變數未經宣告就賦值，此變數就為全域性物件（window）所有。

              簡單解釋起來就是，如果在js中我們在賦值時經常先定義一個變數，如：var a = 123；

              此時123這個數字便被賦予了a這個變數，此時我們在控制檯console.log(a)就會得到a的值123；

              這時就會我們就會有個疑問，如果我們沒有定義變數直接進行賦值還會打印出值麼。

              答案是肯定的，此時如果我們未定義變數直接賦值，如：

                b = 456；

            此時a會被認為是全域性的一個物件，即window下的一個值，此時我們在控制檯下console.log(b)同樣可以得到b的值456。

            此時我們可以認為    b = 123   ————>   window.b  =456

   2. 一切宣告的全域性變數,全是window。

簡單說明就是我們 var  c = 789   ===>    window.c = 789（即：c =789）

預編譯（粗淺版本）

下面我們來看一下對預編譯最基本的膚淺理解（該理解非常粗淺無法解決複雜問題）：

函式宣告整體提升

    變數，宣告提升

個人理解：在函式執行前函式宣告（function（）{}）會整體提升至邏輯的最前方，

                 變數則會把自身的宣告提升到程式的最最前方。

//註釋  var  a =123；是變數宣告+賦值

    var  a：變數宣告

    a  = 123 變數賦值

    在預編譯時我們不看賦值，只把變數的宣告提升，因此若在賦值前列印會提示undefined；

此時我們就可以理解之前的問題了：

        先列印再定義：

                    console.log(a);

                    var a = 123;  

在執行前var  a提升至程式碼的最最前端 ，提升後我們再列印 a，由於此時a未被賦值因此列印提示undefined。

                     console.log(a);

      不定義:

                    console.log(a);

  此時由於沒有a的定義，所以會報錯提示a is not defined；即：a未定義。

看似很好理解但是如果程式碼稍微複雜便無法解決，例如（這是一道老師給出的題我想破了頭）：

            console.log(a);   fun

            function a(a) {

                        var  a  =  456;

                        var  a   =function  ()  {

                }

                       a();

            }

                    var  a  =   123;

下面我們來看一下真正的預編譯：

預編譯（精裝版本）：

    預編譯的四部曲：

        1.建立GO/AO物件
        2.找形參和變數宣告，將變數和形參名作為AO屬性名，值為undefined
        3.將實參值和形參統一

        4.在函式體裡面找函式宣告，值賦予函式體

以此為例：

  再次函式中我們來進行預編譯：
      1.建立AO物件：我們隱式的在函式中建立了一個AO的物件來盛放函式中的變數，此時物件中並沒有值；

       2.找形參和變數宣告，將變數和形參名作為AO屬性名，值為undefined：我們在第二個過程中需按照變數和形參

      3.將實參值和形參統一：此時將實參帶入函式中由於在函式外 f(1)，因此AO中a = 1

    4.在函式體裡面找函式宣告，值賦予函式體：由於在函式中有 function a() {} ，這一函式因此此時AO中 a = function a() {}

在進行完預編譯後此時若執行函式則會以AO為基礎對函式中的變數進行賦值：此時函式中有兩次列印一次在函式開頭，一次在函式為a賦值之後

再賦值前由於AO中值不變因此a所打印出的值為 function a() {}

在賦值後AO中a = 123，所以此時打印出的值為123。