JavaScript（單線行解釋型語(yǔ)言）運(yùn)行三部曲: 1語(yǔ)法分析 2預(yù)編譯 3 解釋執(zhí)行

知識(shí)點(diǎn)：預(yù)編譯 作用域 閉包 立即執(zhí)行

預(yù)編譯

關(guān)鍵語(yǔ)句：

1函數(shù)聲明整體提升 。

2變量聲明只有變量提升。
例如：var a=3;//實(shí)際操作是 var a ;a=3；但是只把var a 提升

3 imply global 暗示全局變量：即任何變量如果變量未經(jīng)聲明就賦值此變量就為全局對(duì)象所有。
例如：function test(){a=123;console.log(a)} test() 分析：a未聲明賦值，a的值是歸全局對(duì)象(global object )所有 。a的值在GO，寫作GO{ a:3}。
再例如：var a=b=3;實(shí)際是var a ;a=b=3;只有a被聲明了，b是未聲明即屬于全局變量。

4 一切聲明的全局變量，全是window的屬性,（Window就是全局的域。）

例如：eg:var a = 123; ===> window.a = 123

預(yù)編譯步驟

1創(chuàng)建一個(gè)AO對(duì)象。
2找到形參和變量聲明。將 形參和 變量名 作為AO的屬性，值為undefined。
3實(shí)參和形參統(tǒng)一，即實(shí)參賦值給形參。
4在函數(shù)體里找函數(shù)聲明，將值賦予函數(shù)體。（）

案例1：

function fn(a)  {
    console.log(a);
    var a=123;
    console.log(a);
    function a(){}
    console.log(a);
    var b=function(){}
    console.log(b);
   function d(){}
   
}

fn(1)

預(yù)編譯(發(fā)生在函數(shù)執(zhí)行的前一刻)
1，創(chuàng)建AO{ }。
2，找到形參 a 和變量聲明var a =123中的a,var b中的b,相同的a只寫一個(gè)，值為undefined。此時(shí)AO{a:undefined;b:undefined}。
3,實(shí)參和形參統(tǒng)一，即fn(1)的1賦給fn(a)的a。此時(shí)AO{ a:1;b:undefined}
4，在fn(a)這個(gè)函數(shù)體中找函數(shù)聲明，即有 function a(){}和 function d(){}將值賦給函數(shù)體。此時(shí)AO{ a:function a(){};b:undefined;d:function d(){}}。
解釋執(zhí)行函數(shù)
第一個(gè)console.log(a)→function a(){}
a=123即AO{ a:123;b:undefined;d:function d(){}}。
第二個(gè)console.log(a)→123。
function a(){} 已經(jīng)提升上去了，不需要看了。
第三個(gè)console.log(a)→123。
b=function(){}即AO{ a:123; b:function(){ } }; d:function d(){}}。
console.log(b)→function(){ }
function d(){} 已經(jīng)提升上去了，不需要看了。

作用域

關(guān)鍵語(yǔ)句

作用域鏈：[[scope]]中所存儲(chǔ)的執(zhí)行期上下文對(duì)象的集合，這個(gè)集合呈鏈?zhǔn)芥溄?，我們把這種鏈?zhǔn)芥溄咏凶鲎饔糜蜴湣?br> [[scope]]:[[scope]]指的就是我們所說(shuō)的作用域,其中存儲(chǔ)了運(yùn)行期上下文的集合。
查找變量：從作用域鏈的頂端依次向下查找（在哪個(gè)函數(shù)內(nèi)就從這個(gè)函數(shù)的作用域鏈頂端查找）。

運(yùn)行期上下文:當(dāng)函數(shù)執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)稱為執(zhí)行期上下文的內(nèi)部對(duì)象。一個(gè)執(zhí)行期上下文定義了一個(gè)函數(shù)執(zhí)行時(shí)的環(huán)境，函數(shù)每次執(zhí)行時(shí)對(duì)應(yīng)的執(zhí)行上下文都是獨(dú)一無(wú)二的，所以多次調(diào)用一個(gè)函數(shù)會(huì)導(dǎo)致創(chuàng)建多個(gè)執(zhí)行上下文，當(dāng)函數(shù)執(zhí)行完畢，執(zhí)行上下文被銷毀。

案例2

var global=100;
function  temp1( ){
    function temp2(){
      function temp3(){
      var global=400;
      console.log(global)//400
      
    }
        var global = temp3;
            temp3();
    console.log(global)// 打印 function temp3()內(nèi)的所有內(nèi)容即 function temp3(){var global=400; console.log(global)}
  }
  var global=temp2;
  temp2()
  console.log(global)//打印function temp2()內(nèi)的所有內(nèi)容即 function temp2(){function temp3(){var global=400;console.log(global)}var global = temp3;temp3();console.log(global) }
      
 }
    
temp1( )

分析運(yùn)行時(shí)的作用域鏈
temp1
temp1 -->>defined:GO{ global: 100;fn temp1}
temp1 -->>doing: temp1AO{ global: temp2；fn temp2; }GO{ global: 100;fn temp1;}
temp2 -->>defined:temp1AO{ global: temp2;fn temp2; }GO{ global: 100;fn temp1;}
temp2 -->>doing:temp2AO{ global: temp3;fn temp3; } temp1AO{ global: temp2;fn temp2; }GO{ global: 100;fn temp1;}
temp3 -->>defined:temp2AO{ global: temp3;fn temp3; }temp1AO{ global: temp2;fn temp2; }GO{ global: 100;fn temp1;}
temp3 -->>doing:temp3AO{ global=400} temp2AO{ global: temp3;fn temp3; }temp1AO{ global: temp2;fn temp2; }GO{ global: 100;fn temp1;}

閉包

關(guān)鍵語(yǔ)句

1，當(dāng)內(nèi)部函數(shù)被保存到外部將會(huì)生成閉包。原有作用域鏈不釋放，造成內(nèi)存泄漏。
2，閉包作用：
實(shí)現(xiàn)公有變量:函數(shù)累加器。
可以做緩存:eater。
可以實(shí)現(xiàn)封裝，屬性私有化: Person()。
模塊化開發(fā)，防止污染全局變量。

//簡(jiǎn)單函數(shù)累加器，內(nèi)部函數(shù)b被保存到外部用一個(gè)變量add接受，且原有的作用域鏈也一起保存到外部。
function a(){
  var count=0;
  function b(){ 
   
  console.log(count++);
  
   }
 return b;
  
}

var add=a();
add();

//函數(shù)緩存案例


 function test() {
              var food = "apple";
              var obj = {
                eatFood: function() {
                    if (food != "") {
                        console.log("I am eating  " + food);
                        food = "";
                    } else {
                        console.log("nothing")
                    }
                },
                pushFood: function(myFood) {
                    food = myFood;




                }

            }
            return obj;
        }
        var person = test();
        person.eatFood(); //I am eating apple
        person.eatFood(); //nothing
        person.pushFood("banana"); //food ="banana"
        person.eatFood(); //I am eating  banana

下面是 閉包 和 立即執(zhí)行函數(shù) 運(yùn)用案例

//i=10,for循環(huán)才不執(zhí)行，傳給數(shù)組的i的值是最后改變成的結(jié)果 i=10。共執(zhí)行10此，因此是10個(gè)10。
function test() {
            var arr = [];
            for (var i = 0; i < 10; i++) {
              
                    arr[i] = function() {
                        console.log(i);//10個(gè)10
        
            }
            return arr;

        }

        var myArr = test();


        for (j = 0; j < 10; j++) {
            myArr[j]();//將數(shù)組打印，j只用于計(jì)數(shù)，可以為任意字母。

        }

//若想輸出值是0~9，必須保證每次給到arr[]的i后 不能因?yàn)閕++保存打印函數(shù)受影響?？梢赃m應(yīng)立即執(zhí)行函數(shù)，執(zhí)行完銷毀，并且將i作為實(shí)參 傳遞給arr[]。
function test() {
            var arr = [];
            for (var i = 0; i < 10; i++) {
                (function(j) {
                    arr[j] = function() {
                        console.log(j);//0~9
                    }



                }(i))


            }
            return arr;

        }

        var myArr = test();


        for (j = 0; j < 10; j++) {
            myArr[j]();

        }//將數(shù)組打印，j和上面函數(shù)的j 無(wú)關(guān)，j只用于計(jì)數(shù)數(shù)組，可以為任意字母。

立即執(zhí)行函數(shù)

關(guān)鍵語(yǔ)句 （只有表達(dá)式才能被執(zhí)行）
寫法：推薦寫法→（ function（）{} （））也可以寫作（不推薦） →（ function（）{} ）（）
作用：執(zhí)行后即刻銷毀，所以可以用作初始化

其他知識(shí)點(diǎn)

var a=(b,c);//逗號(hào)操作符，先運(yùn)行b,再運(yùn)行c,最后把b的運(yùn)行結(jié)果賦給a。

var f=(   
          function  f() {return "1";},
         function  g() {return 2;}
)（）；
typeof f；//數(shù)字2

PS：關(guān)于閉包的其他作用目前尚未有案例，后續(xù)將會(huì)補(bǔ)充。