在这篇文章中,我会深入理解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/)

JavaScript中执行环境和栈的更多相关文章

  1. 转载: JavaScript中执行环境和栈

    在这篇文章中,我会深入理解JavaScript最根本的组成之一 : "执行环境(执行上下文)".文章结束后,你应该对解释器试图做什么,为什么一些函数/变量在未声明时就可以调用并且他 ...

  2. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  3. javascript中执行环境和作用域(js高程)

    执行环境(execution context,为简单起见,有时也成为“环境”)是javascript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境 ...

  4. javascript 之执行环境-08

    概念 执行环境(Execution context,简称EC)或执行上下文对象(后面统一用执行上下文表示),它定义了变量或者函数有权访问的其他数据,决定了他们各自的行为.是不是有点不好理解,那我先简单 ...

  5. javascript中词法环境、领域、执行上下文以及作业详解

    词法环境(Lexical Environments) 官方规范对词法环境的说明是:词法环境(Lexical Environments)是一种规范类型,用于根据ECMAScript代码的词法嵌套结构来定 ...

  6. 从头开始学JavaScript (九)——执行环境和作用域

    原文:从头开始学JavaScript (九)--执行环境和作用域 一.执行环境:定义了变量或者函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有与之关联的变量对象. 变量对象:保存着环境中 ...

  7. Javascript手记-执行环境和作用域

    执行环境是javascript一个重要的概念,执行环境定义了变量有权访问其他数据决定了他们各自的行为,每个执行环境 都有一个与之关联的变量,环境中定义的所有变量和函数都保存在这个对象中,虽然我们编写的 ...

  8. JavaScript之执行环境及作用域

        执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中.我们编写的代码是无法访问这个对象的,但解 ...

  9. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

随机推荐

  1. MySQL基础之 AUTO_INCREMENT

    AUTO_INCREMENT AUTO_INCREMENT是mysql唯一扩展的完整性约束,当为数据库表中插入新纪录时,字段上的值会自动生成唯一的ID,再具体设置AUTO_INCREMENT约束时,一 ...

  2. C++基础算法学习——生理周期

    人有体力.情商.智商的高峰日子,它们分别每隔23天.28天和33天出现一次.对于每个人,我们想知道何时三个高峰落在同一天.给定三个高峰出现的日子p,e和i(不一定是第一次高峰出现的日子),再给定另一个 ...

  3. 【转】头部属性 Meta http-equiv 大全

    http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的http-equiv类型有: 1.Content-Type和Content-Langu ...

  4. shiro实战系列(七)之Realm

    Realm 是一个能够访问应用程序特定的安全数据(如用户.角色及权限)的组件.Realm 将应用程序特定的数据转 换成一种 Shiro 能够理解的格式,这样 Shiro 能够提供一个单一的易理解的 S ...

  5. C#中XmlSerializer实现序列化浅析

    C# XmlSerializer类是实现序列化的一个类,那么关于C# XmlSerializer的学习我们要掌握怎么样的操作方法呢?那么这里向你详细介绍具体的操作细节情况. C# XmlSeriali ...

  6. python生成语谱图

    语音的时域分析和频域分析是语音分析的两种重要方法,但是都存在着局限性.时域分析对语音信号的频率特性没有直观的了解,频域特性中又没有语音信号随时间的变化关系.而语谱图综合了时域和频域的优点,明显的显示出 ...

  7. 各种 mv power cell

    1. retention register : VDDB 是 backup power,当primary power shutoff 时 backup 会继续供电,将 reg 当前状态保存下来 2. ...

  8. nodejs开发调试时,使用supervisor

    如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一部份,都必须终止Node.js 再重 ...

  9. Centos7-kafka-2.12安装验证

    1.下载Kafka 官网:https://kafka.apache.org/ 2.安装脚本 #解压 tar zxf kafka_2.-.tgz -C /usr/local mv /usr/local/ ...

  10. 如何使用jstack分析线程状态

    背景 记得前段时间,同事说他们测试环境的服务器cpu使用率一直处于100%,本地又没有什么接口调用,为什么会这样?cpu使用率居高不下,自然是有某些线程一直占用着cpu资源,那又如何查看占用cpu较高 ...