JavaScript中执行环境和栈

在这篇文章中，我会深刻理解JavaScript最根本的组成之一 : "执行环境(执行上下文)"。文章结束后，你应该对解释器试图作什么，为何一些函数／变量在未声明时就能够调用而且他们的值是如何肯定的有一个清晰的认识。

 

什么是执行环境(执行上下文)
当代码在JavaScript中运行的时候，代码在环境中被执行是很是重要的，它会被评估为如下之一类型来运行：
全局代码：默认环境，你的代码第一时间在这儿运行。
函数代码：当执行流进入一个函数体的时候。
Eval代码：在eval()函数中的文本。

你能够在网上查找关于做用域的大量资料，这篇文章的目的就是让事情变得更容易理解。让咱们把执行环境做为环境/做用域,当前代码被评估在这个环境/做用域中。如今，让咱们来看一个例子，代码被评估某个类型，这个例子中类型包括全局和函数环境：

这里并无什么特别的，咱们有一个全局环境，全局环境由紫色边框表示，还有三个不一样的函数环境分别由绿色边框，蓝色边框和橙色边框表示。这里只能由一个全局环境，在你的程序中，全局环境能够被其余环境访问。

你能够由不少的函数环境，每一个函数都会建立一个新的函数环境，在新的函数环境中，会建立一个私有做用域，在这个函数中建立的任何声明都不能被当前函数做用域以外的地方访问。在上面例子中，一个函数能够访问当前环境外部定义的变量，可是在外部却没法访问函数内部声明的变量。为何这样？这段代码到底是如何评估的？

 执行环境栈

JavaScript解释器在浏览器中是单线程的，这意味着浏览器在同一时间内只执行一个事件，对于其余的事件咱们把它们排队在一个称为 执行栈的地方。下表是一个单线程栈的抽象视图。

咱们已经知道，当浏览器第一次加载你的script，它默认的进了全局执行环境。若是在你的全局代码中你调用了一个函数，那么顺序流就会进入到你调用的函数当中，建立一个新的执行环境而且把这个环境添加到执行栈的顶部。

若是你在当前的函数中调用了其余函数，一样的事会再次发生。执行流进入内部函数，而且建立一个新的执行环境，把它添加到已经存在的执行栈的顶部。浏览器始终执行当前在栈顶部的执行环境。一旦函数完成了当前的执行环境，它就会被弹出栈的顶部, 把控制权返回给当前执行环境的下个执行环境。下面例子展现了一个递归函数和该程序的执行栈：
```javascript
(function foo(i) {
if (i === 3) {
return;
}
else {
foo(++i);
}
}(0));
```

这段代码简单地调用了本身三次，由1递增i的值。每次函数foo被调用，一个新的执行环境就会被调用。一旦一个环境完成了执行，它就会被弹出执行栈而且把控制权返回给当前执行环境的下个执行环境直到再次到达全局执行环境。

记住执行栈，这儿有五个关键点 
1. 单线程
2. 同步执行
3. 一个全局环境
4. 无限的函数环境
5. 函数被调用就会建立一个新的执行环境，甚至调用本身。

 执行环境的详情

如今咱们直到，一个函数被调用就会建立一个新的执行环境。然而解释器的内部，每次调用执行环境会有两个阶段：

1. 建立阶段
- 当函数被调用，可是为执行内部代码以前:
- 建立一个[做用域链](http://davidshariff.com/blog/javascript-scope-chain-and-closures/)。
- 建立变量，函数和参数。
- 肯定this的值。

2. 激活/代码执行阶段
> - 赋值，引用函数，解释/执行代码。

这可能意味着每一个执行环境在概念上做为一个对象并带有三个属性
```javascript
executionContextObj = {
scopeChain: { /* variableObject + all parent execution context's variableObject */ },
//做用域链：{变量对象＋全部父执行环境的变量对象}
variableObject: { /* function arguments / parameters, inner variable and function declarations */ },
//变量对象:{函数形参＋内部的变量＋函数声明(但不包含表达式)}
this: {}
}
```
----
### 活动／变量 对象(AO/VO)
当函数被调用，executionContextObj就被建立，该对象在实际函数执行前就已建立。这就是已知的第一个阶段建立阶段.在第一阶段，解释器建立了executionContextObj对象，经过扫描函数，传递形参，函数声明和局部变量声明。扫描的结果成为了变量对象在executionContextObj中。

- 这有一个解释器是如何评估代码的伪概述：
1. 找到一些代码来调用函数
2. 在执行函数代码前，建立执行环境
3. 进入建立阶段：
- 初始化做用域链
- 建立变量对象:
- 建立arguments对象，检查环境中的参数，初始化名和值，建立一个参考副本
- 扫描环境中内的函数声明：
- 某个函数被发现，在变量对象建立一个属性，它是函数的确切名。它是一个指针在内存中，指向这个函数。
- 若是这个函数名已存在，这个指针的值将会重写。
- 扫描环境内的变量声明
- 某个变量声明被发现，在变量对象中建立一个属性，他是变量的名，初始化它的值为undefined。
- 若是变量名在变量对象中已存在，什么也不作，继续扫描。
- 在环境中肯定this的值。
4. 激活/代码执行阶段：在当前上下文上运行/解释函数代码，并随着代码一行行执行指派变量的值

看下面例子：
```javascript
function foo(i) {
var a = 'hello';
var b = function privateB() {

};
function c() {

}
}

foo(22);
```
On calling foo(22), the creation stage looks as follows:
在调用foo(22)时，建立阶段像下面这样：
```javascript
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: undefined,
b: undefined
},
this: { ... }
}
```
正如你看到的，建立阶段处理了定义属性的名，可是并不把值赋给变量，不包括形参和实参。一旦建立阶段完成,执行流进入函数而且激活/代码执行阶段,在函数执行结束以后，看起来像这样：
```javascript
fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: 'hello',
b: pointer to function privateB()
},
this: { ... }
}
```
### 进阶一言

你能够在网上找到大量的术语来描述JavaScript进阶。解释变量和函数声明被提高到它们函数做用域的顶端。然而，没有一个详细的解释为何这样， 如今你配备了关于解释器怎么建立活动对象的新知识，这会很明白这是为何。看看下面例子：
```javascript
​(function() {

console.log(typeof foo); // function pointer
console.log(typeof bar); // undefined

var foo = 'hello',
bar = function() {
return 'world';
};

function foo() {
return 'hello';
}

}());​
```
如今咱们能解答的问题有：

为何在声明foo以前咱们就能够调用?
若是咱们按照建立阶段进行，咱们知道变量在激活/执行阶段以前已经被建立了。所以，在函数流开始执行，foo已经在活动对象中被定义了。
foo被声明了两次, 为何foo展示出来的是functiton，而不是undefined或者string
咱们从建立阶段知道,尽管foo被声明了两次，函数在活动对象中是在变量以前被建立的，而且若是属性名在活动对象已经存在,咱们会简单地绕过这个声明。

因此，引用函数foo（）是在活动对象上第一次被建立的， 当咱们解释到 var foo的时候，咱们发现属性名foo已经存在，因此代码不会作任何处理，只是继续进行

为何bar是undefined？

bar确实是一个变量，而且值是一个函数。咱们知道变量是在建立阶段被建立的，可是它们的值被初始化为undefined。

总结：
但愿如今你能很好的理解JavaScript解释器是如何评估你的代码。
了解执行环境和栈可让你知道你的代码评估的值为什么与你预期值不一样的缘由。

你认为解释器内部工做开支太多？或者你应该有必要的JavaScript知识？了解了执行环境可能会帮助你写出更好的JavaScript？

[原文地址](http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/)