javascript 執行環境細節分析、原理-12

前言

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

執行環境（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]]是保存全部的父級變量對象的一個鏈表，也在《執行環境之變量對象》每一個執行上下文，都存在變量對象。如今問題是若是函數沒有調用那麼這個函數的內部屬性[[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();