JS 執(zhí)行環(huán)境、作用域鏈、活動(dòng)對(duì)象

Tangpj 發(fā)布于2019-08-02 11:02 / 2522人閱讀

摘要：下面仔細(xì)分析下作用域鏈當(dāng)某個(gè)函數(shù)第一次被調(diào)用時(shí)，就會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境以及相應(yīng)的作用域鏈，并把作用域鏈賦值給一個(gè)特殊的內(nèi)部屬性。當(dāng)前執(zhí)行環(huán)境的變量對(duì)象始終在作用域鏈的第位。

JS執(zhí)行環(huán)境

執(zhí)行環(huán)境（Execution context，EC）或執(zhí)行上下文，是JS中一個(gè)極為重要的概念

執(zhí)行環(huán)境分為三種(全局執(zhí)行環(huán)境，函數(shù)執(zhí)行環(huán)境，evel()執(zhí)行環(huán)境)

js為每一個(gè)執(zhí)行環(huán)境關(guān)聯(lián)了一個(gè)變量對(duì)象。環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中

EC的組成

當(dāng)JavaScript代碼執(zhí)行的時(shí)候，會(huì)進(jìn)入不同的執(zhí)行環(huán)境(執(zhí)行上下文)，這些執(zhí)行環(huán)境會(huì)構(gòu)成了一個(gè)執(zhí)行環(huán)境棧(執(zhí)行上下文棧)（Execution context stack，ECS）。見下圖：

變量對(duì)象

變量對(duì)象(VO):變量對(duì)象即包含變量的對(duì)象，除了我們無法訪問它外，和普通對(duì)象沒什么區(qū)別。變量對(duì)象存儲(chǔ)了在上下文中定義的變量和函數(shù)聲明

變量對(duì)象和活動(dòng)對(duì)象(AO)

活動(dòng)對(duì)象和變量對(duì)象其實(shí)是一個(gè)東西，只是變量對(duì)象是規(guī)范上的或者說是引擎實(shí)現(xiàn)上的，不可在 JavaScript 環(huán)境中訪問，只有到當(dāng)進(jìn)入一個(gè)執(zhí)行上下文中，這個(gè)執(zhí)行上下文的變量對(duì)象才會(huì)被激活，所以才叫 activation object
，而只有被激活的變量對(duì)象，也就是活動(dòng)對(duì)象上的各種屬性才能被訪問。
活動(dòng)對(duì)象是在進(jìn)入函數(shù)執(zhí)行環(huán)境時(shí)刻被創(chuàng)建的，它通過函數(shù)的 arguments 屬性初始化。arguments 屬性值是 Arguments 對(duì)象。

變量對(duì)象和活動(dòng)對(duì)象的關(guān)系

未進(jìn)入執(zhí)行階段之前，變量對(duì)象(VO)中的屬性都不能訪問！但是進(jìn)入執(zhí)行階段之后，變量對(duì)象(VO)轉(zhuǎn)變?yōu)榱嘶顒?dòng)對(duì)象(AO)，里面的屬性都能被訪問了，然后開始進(jìn)行執(zhí)行階段的操作。它們其實(shí)都是同一個(gè)對(duì)象，只是處于執(zhí)行環(huán)境的不同生命周期。

    AO 實(shí)際上是包含了 VO 的。因?yàn)槌?VO 之外，AO 還包含函數(shù)的 parameters，以及 arguments 這個(gè)特殊對(duì)象。也就是說 AO 的確是在進(jìn)入到執(zhí)行階段的時(shí)候被激活，但是激活的除了 VO 之外，還包括函數(shù)執(zhí)行時(shí)傳入的參數(shù)和 arguments 這個(gè)特殊對(duì)象。

　　 AO = VO + function parameters + arguments

執(zhí)行環(huán)境分析

全局執(zhí)行環(huán)境是最外圍的執(zhí)行環(huán)境，全局執(zhí)行環(huán)境被認(rèn)為是window對(duì)象，因此所有的全局變量和函數(shù)都作為window對(duì)象的屬性和方法創(chuàng)建的。 
js的執(zhí)行順序是根據(jù)函數(shù)的調(diào)用來決定的，當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，該函數(shù)環(huán)境的變量對(duì)象就被壓入一個(gè)環(huán)境棧中。而在函數(shù)執(zhí)行之后，棧將該函數(shù)的變量對(duì)象彈出，把控制權(quán)交給之前的執(zhí)行環(huán)境變量對(duì)象。

eg：

    var scope = "global"; 
      function fn1(){
         return scope; 
      }
      function fn2(){
         return scope;
      }
      fn1();
      fn2();

演示如下：

[[Scope]] 作用域 變量的作用域

變量的作用域就兩種：全局變量和局部變量

    全局作用域：最外層函數(shù)定義的變量擁有全局作用域，即對(duì)任何內(nèi)部函數(shù)來說，都是可以訪問的：eg：

          var outerVar = "outer";
          function fn(){
              console.log(outerVar);
      }
          fn();//result:outer

    局部作用域：局部作用域一般只在固定的代碼片段內(nèi)可訪問到，而對(duì)于函數(shù)外部是無法訪問的

     function fn(){
         var innerVar = "inner";
      }
      fn();
      console.log(innerVar);// ReferenceError: innerVar is not defined

    注意：函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令。如果不用的話，你實(shí)際上聲明了一個(gè)全局變量！

    function fn(){
            age = 18;
        }
        fn();
        console.log(age);// 18

再來看一個(gè)有趣的現(xiàn)象：

      var scope = "global";
      function fn(){
         console.log(scope);//result:undefined
         var scope = "local";
         console.log(scope);//result:local;
      }
      fn();

分析：第一個(gè)輸出居然是undefined，原本以為它會(huì)訪問外部的全局變量(scope=”global”)，但是并沒有。這可以算是javascript的一個(gè)特點(diǎn)，只要函數(shù)內(nèi)定義了一個(gè)局部變量，函數(shù)在解析的時(shí)候都會(huì)將這個(gè)變量“提前聲明”，他就等價(jià)于下面的代碼：

     var scope = "global";
      function fn(){
         var scope;//提前聲明了局部變量
         console.log(scope);//result:undefined
         scope = "local";
         console.log(scope);//result:local;
      }
      fn();

[[Scopr Chain]] 作用域鏈

理解：根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制，用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問，這就是作用域鏈

上面給出了環(huán)境變量。下面仔細(xì)分析下作用域鏈

當(dāng)某個(gè)函數(shù)第一次被調(diào)用時(shí)，就會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境(execution context)以及相應(yīng)的作用域鏈，并把作用域鏈賦值給一個(gè)特殊的內(nèi)部屬性([scope])。然后使用this，arguments(arguments在全局環(huán)境中不存在)和其他命名參數(shù)的值來初始化函數(shù)的活動(dòng)對(duì)象(activation object)。當(dāng)前執(zhí)行環(huán)境的變量對(duì)象始終在作用域鏈的第0位。以上述執(zhí)行環(huán)境分析的小例子為例進(jìn)行圖解：當(dāng)?shù)谝淮握{(diào)用fn1時(shí)。

解析：可以看到fn1活動(dòng)對(duì)象里并沒有scope變量，于是沿著作用域鏈(scope chain)向后尋找，結(jié)果在全局變量對(duì)象里找到了scope，所以就返回全局變量對(duì)象里的scope值。

再分析下面的代碼：

    function outer(){
         var scope = "outer";
         function inner(){
            return scope;
         }
         return inner;
      }
      var fn = outer();
      fn();

總結(jié)

說實(shí)話，這節(jié)真的是很難，現(xiàn)在還是似懂非懂，不知道在學(xué)前端的小伙伴你們覺得呢？如果你們覺得這節(jié)學(xué)會(huì)了，可以給我留言，我是真心不懂這節(jié)的內(nèi)容，希望有會(huì)的小伙伴可以給我點(diǎn)幫助！謝謝！