前面几篇说了执行环境相关的概念，本篇在次回顾下
执行环境（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();
如对本文有疑问， 点击进行留言回复！！
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论