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/)
JavaScript中执行环境和栈的更多相关文章
- 转载: JavaScript中执行环境和栈
在这篇文章中,我会深入理解JavaScript最根本的组成之一 : "执行环境(执行上下文)".文章结束后,你应该对解释器试图做什么,为什么一些函数/变量在未声明时就可以调用并且他 ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
- javascript中执行环境和作用域(js高程)
执行环境(execution context,为简单起见,有时也成为“环境”)是javascript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境 ...
- javascript 之执行环境-08
概念 执行环境(Execution context,简称EC)或执行上下文对象(后面统一用执行上下文表示),它定义了变量或者函数有权访问的其他数据,决定了他们各自的行为.是不是有点不好理解,那我先简单 ...
- javascript中词法环境、领域、执行上下文以及作业详解
词法环境(Lexical Environments) 官方规范对词法环境的说明是:词法环境(Lexical Environments)是一种规范类型,用于根据ECMAScript代码的词法嵌套结构来定 ...
- 从头开始学JavaScript (九)——执行环境和作用域
原文:从头开始学JavaScript (九)--执行环境和作用域 一.执行环境:定义了变量或者函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有与之关联的变量对象. 变量对象:保存着环境中 ...
- Javascript手记-执行环境和作用域
执行环境是javascript一个重要的概念,执行环境定义了变量有权访问其他数据决定了他们各自的行为,每个执行环境 都有一个与之关联的变量,环境中定义的所有变量和函数都保存在这个对象中,虽然我们编写的 ...
- JavaScript之执行环境及作用域
执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中.我们编写的代码是无法访问这个对象的,但解 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
随机推荐
- 乘风破浪:LeetCode真题_041_First Missing Positive
乘风破浪:LeetCode真题_041_First Missing Positive 一.前言 这次的题目之所以说是难,其实还是在于对于某些空间和时间的限制. 二.First Missing Posi ...
- October 31st, 2017 Week 44th Tuesday
No matter how hard the past is, you can always begin again. 不管过去有多么困难,你都可以重新开始. Honestly, I don't ag ...
- FZU Monthly-201903 获奖名单
FZU Monthly-201903 获奖名单 冠军: 黄海东 S031702647 一等奖: 林闽沪 S131700309 陈华能 S221701416 二等奖: 鲍子涵 S031702646 吴少 ...
- 静态性能测试-hc课堂笔记
UI自动化,需要掌握html相关知识 w3c网站. 会了性能测试就会了接口自动化. 静态扫描:降低40-50% findbugs,隐含的bug checkstyle,风格规范 域名解析: 输入网址-D ...
- <Android 开源库> PhotoPicker 从头到脚
1. 简介 PhotoPicker, 是一款开源的图片选择器.效果上和微信相似. 2. 使用方法 2.1 添加依赖 dependencies { compile 'me.iwf.photopicker ...
- OpenCV——重映射、仿射变换
#include <opencv2/opencv.hpp> #include <iostream> #include <math.h> using namespac ...
- Vue 下拉列表 组件模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HDU 1269 迷宫城堡(判断有向图强连通分量的个数,tarjan算法)
迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- SVN之 trunk, branches and tags意义
--简单的对照 SVN的工作机制在某种程度上就像一颗正在生长的树: 一颗有树干和很多分支的树 分支从树干生长出来.而且细的分支从相对较粗的树干中长出 一棵树能够仅仅有树干没有分支(可是这样的情况不会持 ...
- go语言之行--接口(interface)、反射(reflect)详解
一.interface简介 interface(接口)是golang最重要的特性之一,Interface类型可以定义一组方法,但是这些不需要实现.并且interface不能包含任何变量. 简单的说: ...