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

2018-06-24 01:16:37来源：未知阅读 ()

前言

前面几篇说了执行环境相关的概念，本篇在次回顾下

执行环境（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();

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：js 判断数组中是否有某值

下一篇：js 判断数组中是否有重复值

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签