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

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

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

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

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

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

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

EC的組成

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

變量對象

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

變量對象和活動對象(AO)

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

變量對象和活動對象的關(guān)系

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

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

　　 AO = VO + function parameters + arguments

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

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

eg：

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

演示如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

再分析下面的代碼：

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

總結(jié)

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

GPU云服務(wù)器云服務(wù)器作用域鏈 javascript作用域鏈 js執(zhí)行環(huán)境執(zhí)行環(huán)境

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52723.html

發(fā)表評論

登陸后可評論

0條評論

Tangpj

男|高級講師

我要關(guān)注我要私信

TA的文章

caffe轉(zhuǎn)tensorflow

閱讀 794·2023-04-26 00:30
Python基于邏輯回歸的糖尿病視網(wǎng)膜病變檢測（數(shù)據(jù)集messidor_features.arff）

閱讀 2702·2021-11-23 09:51
Megalayer：菲律賓vps/香港vps/美國vps，1核/1G/50G SSD，年付159元起

閱讀 1050·2021-11-02 14:38
免費(fèi)可商用字體可下載阿里巴巴普惠體新增4個字重不用擔(dān)心版權(quán)問題

閱讀 2572·2021-09-07 10:23
ion cloud：新加坡數(shù)據(jù)中心CN2 GIA網(wǎng)絡(luò)云服務(wù)器簡單測評

閱讀 2248·2021-08-21 14:09
?520，就用CSS給你的她（他）送顆心?

閱讀 1387·2019-08-30 10:57
微信小程序 demo 整理

閱讀 1608·2019-08-29 11:20
淺析JavaScript異步

閱讀 1157·2019-08-26 13:53

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

形象化模擬作用域鏈，深入理解js作用域、閉包

[學(xué)習(xí)筆記] JavaScript 作用域鏈

**js 執(zhí)行環(huán)境活動對象變量對象作用域鏈的理解**

JS 作用域鏈

關(guān)于js閉包