前言

前面幾篇說了執行環境相關的概念，本篇在次回顧下

執行環境（Execution context，簡稱EC，也稱執行上下文 ）

　　定義了變量或者函數有權訪問的數據，決定了各自行為，每個執行環境都有一個變量對象，之前我說執行環境可以先理解為?js代碼執行時所在的環境，其實把上下文當做是一個對象應該差不多了。注意：每調用一次函數都會創建一個執行上下文，而且將這個上下文壓入執行環境棧的頂部，無論是函數內部的函數、還是遞歸調用等；

全局執行環境是最后的一個執行環境，在web中全局執行環境是window對象，js引擎一開始默認進入全局執行環境

執行環境棧

　　執行環境棧的作用是為了保證程序能夠按照正確的順序被執行，當執行流進入一個函數時，函數的執行上下文就會被推入這個環境棧中的頂端，當函數執行完畢之后，棧將這個執行上下文彈出，然后把控制權返回給之前的執行上下文。這樣實現的原因是由于 Javascript 解釋器是單線程的，也就是同一時刻只能發生一件事情，其它等待執行的上下文會在這個環境棧中排隊等待。

變量對象

　　變量對象是與執行上下文相關的數據作用域。它是一個與上下文相關的特殊對象，其中存儲了在上下文中定義的變量、函數聲明、形參。即一般VO中會包含以下信息：

• var 聲明的變量
• 函數聲明
• 函數的形參

作用域鏈

　　保證對執行環境有權訪問的所有變量和函數有序的訪問，作用域鏈的頂端始終都是當前執行環境的變量對象；

　　如果看完前面幾篇，現在在回頭看看這些概念是不是有點感覺了；

執行環境分析

　　開始的時候認為js代碼跟html一樣都是從上到下開始執行、解析，其實我認為這種說法在js中不太準確，因為js在初始化變量對象的時候存在聲明提前的情況。

下面分析下執行環境的一些細節，有錯誤的地方歡迎指正。

JavaScript是按照代碼塊來進行編譯和執行，代碼塊之間相互獨立，但是變量和方法共享 如下

1 <script>
2     console.log("這是代碼塊一");
3 </script>
4 
5 <script>
6     console.log("這是代碼塊二");
7 </script>

下面的代碼塊一中運行報錯，但是不影響代碼塊二中代碼的執行，這是因為代碼塊的獨立性，代碼塊二能調用代碼塊一中的變量，這是因為代碼塊中的共享性。

1 <script>
2     var str = "Hello JavaScript";
3     console.log(str_test);  //執行結果： 報錯 str_test is not defined 。 沒有定義這個變量
4 </script>
5 
6 <script>
7     console.log(str);   //輸出Hello JavaScript，因為在代碼塊一中定義了str
8 </script>

全局初始化

當第一次加載<script>代碼快時，首先創建一個全局對象(Global Object) ， 這個對象全局只存在一個，它的屬性在任何地方都可以訪問，它的存在伴隨著應用程序的整個生命周期。全局對象在創建時，將Math,String,Date,document 等常用的JS對象作為其屬性。由于這個全局對象不能通過名字直接訪問，因此還有另外一個屬性window，并將window指向了自身，這樣就可以通過window訪問這個全局對象了。

1  //創建一個全局對象
2     var globalObject = {
3         Math: {},
4         String: {},
5         Date: {},
6         document: {}, //DOM操作
7         ...
8         window:this //讓window屬性指向了自身
9     }

然后，JS引擎創建一個執行環境棧( Execution Context Stack) ECS ，同時創建一個全局執行環境（Execution Context）EC ，并將這個全局執行環境EC壓入執行環境棧中。

1 var ECStack = []; //定義一個執行環境棧，類似于數組
2     var EC = {};   //創建一個上下文
3     ECStack.push(EC); //進入函數，壓入執行環境棧

最后，JS引擎還要創建一個與EC關聯的全局變量對象(Varibale Object) VO, 并把VO指向全局對象，VO中不僅包含了全局對象的原有屬性，還包括在全局定義的變量和函數 ，與此同時，每個函數在編譯的時候，都會創建一個內部屬性[[scope]]，[[scope]]保存著所有父級變量對象，類似一個鏈表，最后一個是全局對象；之所有[[scope]]可以做到這樣我想這大概就是詞法作用域吧，在源代碼中當你定義（書寫）一個函數的時候（并未調用），js引擎也能根據你函數書寫的位置，函數嵌套的位置，給你生成一個[[scope]]，作為該函數的屬性存在（這個屬性屬于函數的），即使函數不調用，所以說js作用域基于詞法作用域（靜態作用域）。

 1 ECStack = [   //執行環境棧
 2     EC(G) = {   //全局執行環境
 3         VO(G):{ //定義全局變量對象
 4             ... //包含全局對象原有的屬性
 5             x = 1; //全局變量x
 6             xx = function(){...}; //全局函數xx
 7             A[[scope]] = this; //定義A的scope，并賦值為VO本身
 8         }
 9     }
10 ];

?執行函數

首先，JS引擎會創建函數執行環境EC，接著在EC中創建作用域鏈、變量對象、this指針等屬性，然后EC推入執行環境棧的頂部并獲取執行權。開始執行代碼，EC中的VO 激活成AO，然后將AO推入作用域鏈的頂端，此時完整的作用域鏈創建完成。隨著代碼的執行開始真正意義上給變量對象中的var 聲明的變量賦值；具體創建作用域鏈、變量對象、this指針等細節可以閱讀前面幾篇《執行環境之作用域鏈》、《執行環境之變量對象》、《執行環境之this指針》，這里要做補充的一個內容是關于function 中的內部屬性[[scope]]；

函數內部屬性[[scope]]

在《執行環境之作用域鏈》中曾說過內部屬性[[scope]]是保存所有的父級變量對象的一個鏈表，也在《執行環境之變量對象》每個執行上下文，都存在變量對象?，F在問題是如果函數沒有調用那么這個函數的內部屬性[[scope]]的值是哪里來的呢？如下代碼

1   function a(){
2        function b(){
3            function c(){
4                
5            }
6        }
7    }

按照我的說法c.[[scope]]的值應該是[ b.AO,a.AO,globalContext.VO];

在《作用域》中說過詞法作用域是在編譯階段就可以決定變量的引用，由程序定義的位置決定，和代碼執行順序無關，用嵌套的方式解析。對于詞法作用域我是這里理解的：當源代碼中你定義（書寫）一個函數的時候（并未調用），js引擎也能根據你函數書寫的位置，函數嵌套的位置，給你生成一個[[scope]]，作為該函數的屬性存在（這個屬性屬于函數的），即使函數不調用，所以說基于詞法作用域（靜態作用域）。所以這里我認為內部屬性[[scope]]的值就是因為詞法作用域；

實例分析

下面我們將分通過執行函數A、執行函數B?分析：

 1     var x = 1;  //定義一個全局變量 x
 2     function A(y) {
 3         var x = 2;  //定義一個局部變量 x
 4         function B(z) { //定義一個內部函數 B
 5             console.log(x + y + z);
 6         }
 7         return B; //返回函數B的引用
 8     }
 9     var C = A(1); //執行A,返回B
10     C(1); //執行函數B，輸出 4

?執行函數A：

 1 ECStack = [   //執行環境棧
 2     EC(A) = {   //A的執行環境
 3         [scope]:VO(G), //VO是全局變量對象
 4         AO(A) : { //創建函數A的活動對象
 5             y:1,
 6             x:2,  //定義局部變量x
 7             B:function(){...}, //定義函數B
 8             B[[scope]] = this; //this指代AO本身，而AO位于scopeChain的頂端，因此B[[scope]]指向整個作用域鏈
 9             arguments:[],//平時我們在函數中訪問的arguments就是AO中的arguments
10             this:window  //函數中的this指向調用者window對象
11         },
12         scopeChain:<AO(A),A[[scope]]>  //鏈表初始化為A[[scope]],然后再把AO加入該作用域鏈的頂端,此時A的作用域鏈：AO(A)->VO(G)
13     },
14     EC(G) = {   //全局執行環境
15         VO(G):{ //創建全局變量對象
16             ... //包含全局對象原有的屬性
17             x = 1; //定義變量x
18             A = function(){...}; //定義函數A
19             A[[scope]] = this; //定義A的scope，A[[scope]] == VO(G)
20         }
21     }
22 ];

執行函數B：

函數A被執行以后，返回了B的引用，并賦值給了變量C，執行 C(1) 就相當于執行B(1)，JS引擎需要完成以下工作：

首先，還和上面一樣，創建函數B的執行環境EC，然后EC推入執行環境棧的頂部并獲取執行權。 此時執行環境棧中有兩個執行環境，分別是全局執行環境和函數B的執行環境，B的執行環境在棧頂，全局執行環境在棧的底部。（注意：當函數A返回后，A的執行環境就會從棧中被刪除，只留下全局執行環境）然后，創建函數B的作用域鏈，并初始化為函數B的scope所包含的對象，即包含了A的作用域鏈。最后，創建函數B的活動對象AO,并將B的形參z, arguments對象 和 this對象作為AO的屬性。此時ECStack將會變成這樣：

 1 ECStack = [   //執行環境棧
 2     EC(B) = {   //創建B的執行環境,并處于作用域鏈的頂端
 3         [scope]:AO(A), //指向函數A的作用域鏈,AO(A)->VO(G)
 4         var AO(B) = { //創建函數B的活動對象
 5             z:1,
 6             arguments:[],
 7             this:window
 8         }
 9         scopeChain:<AO(B),B[[scope]]>  //鏈表初始化為B[[scope]],再將AO(B)加入鏈表表頭，此時B的作用域鏈：AO(B)->AO(A)-VO(G)
10     },
11     EC(A), //A的執行環境已經從棧頂被刪除,
12     EC(G) = {   //全局執行環境
13         VO:{ //定義全局變量對象
14             ... //包含全局對象原有的屬性
15             x = 1; //定義變量x
16             A = function(){...}; //定義函數A
17             A[[scope]] = this; //定義A的scope，A[[scope]] == VO(G)
18         }
19     }
20 ];

思考題

1 var o = {
2     bruceZhou: 'bruceZhou',
3     fn: function(){
4         console.log(fn)
5         console.log(bruceZhou);
6     }
7 }
8 o.fn();

?

轉載于:https://www.cnblogs.com/CandyManPing/p/8278283.html

總結

以上是生活随笔為你收集整理的javascript 执行环境细节分析、原理-12的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。