當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

javascript 执行环境细节分析、原理-12

發(fā)布時間：2023/11/27 生活经验 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 执行环境细节分析、原理-12 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

前面幾篇說了執(zhí)行環(huán)境相關(guān)的概念，本篇在次回顧下

執(zhí)行環(huán)境（Execution context，簡稱EC，也稱執(zhí)行上下文）

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

全局執(zhí)行環(huán)境是最后的一個執(zhí)行環(huán)境，在web中全局執(zhí)行環(huán)境是window對象，js引擎一開始默認(rèn)進(jìn)入全局執(zhí)行環(huán)境

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

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

變量對象

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

var 聲明的變量
函數(shù)聲明
函數(shù)的形參

作用域鏈

　　保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)有序的訪問，作用域鏈的頂端始終都是當(dāng)前執(zhí)行環(huán)境的變量對象；

　　如果看完前面幾篇，現(xiàn)在在回頭看看這些概念是不是有點(diǎn)感覺了；

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

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

下面分析下執(zhí)行環(huán)境的一些細(xì)節(jié)，有錯誤的地方歡迎指正。

JavaScript是按照代碼塊來進(jìn)行編譯和執(zhí)行，代碼塊之間相互獨(dú)立，但是變量和方法共享如下

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

下面的代碼塊一中運(yùn)行報錯，但是不影響代碼塊二中代碼的執(zhí)行，這是因為代碼塊的獨(dú)立性，代碼塊二能調(diào)用代碼塊一中的變量，這是因為代碼塊中的共享性。

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

全局初始化

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

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

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

1 var ECStack = []; //定義一個執(zhí)行環(huán)境棧，類似于數(shù)組
2     var EC = {};   //創(chuàng)建一個上下文
3     ECStack.push(EC); //進(jìn)入函數(shù)，壓入執(zhí)行環(huán)境棧

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

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

?執(zhí)行函數(shù)

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

函數(shù)內(nèi)部屬性[[scope]]

在《執(zhí)行環(huán)境之作用域鏈》中曾說過內(nèi)部屬性[[scope]]是保存所有的父級變量對象的一個鏈表，也在《執(zhí)行環(huán)境之變量對象》每個執(zhí)行上下文，都存在變量對象。現(xiàn)在問題是如果函數(shù)沒有調(diào)用那么這個函數(shù)的內(nèi)部屬性[[scope]]的值是哪里來的呢？如下代碼

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

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

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

實(shí)例分析

下面我們將分通過執(zhí)行函數(shù)A、執(zhí)行函數(shù)B?分析：

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

?執(zhí)行函數(shù)A：

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

執(zhí)行函數(shù)B：

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

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

 1 ECStack = [   //執(zhí)行環(huán)境棧
 2     EC(B) = {   //創(chuàng)建B的執(zhí)行環(huán)境,并處于作用域鏈的頂端
 3         [scope]:AO(A), //指向函數(shù)A的作用域鏈,AO(A)->VO(G)
 4         var AO(B) = { //創(chuàng)建函數(shù)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的執(zhí)行環(huán)境已經(jīng)從棧頂被刪除,
12     EC(G) = {   //全局執(zhí)行環(huán)境
13         VO:{ //定義全局變量對象
14             ... //包含全局對象原有的屬性
15             x = 1; //定義變量x
16             A = function(){...}; //定義函數(shù)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();

轉(zhuǎn)載于:https://www.cnblogs.com/CandyManPing/p/8278283.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。