JavaScript中执行环境和栈

浏览数：29 / 时间：2015年06月08日

在这篇文章中，我会深入理解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被声明了两次，函数在活动对象中是在变量之前被创建的，并且如果属性名在活动对象已经存在,我们会简单地绕过这个声明。