文章同步到github javaScript中的执行上下文和变量对象html
JavaScript代码执行的过程,包括编译和执行两个阶段,编译就是经过词法分析,构建抽象抽象语法树,并编译成机器识别的指令,在JavaScript代码编译阶段,做用域规则就已经肯定了;在代码执行阶段,或者函数一旦调用,便会建立执行上下文(Execution Context),也叫执行环境前端
在ECMA-262中有以下一段定义java
当控制器转入 ECMA 脚本的可执行代码时,控制器会进入一个执行环境。当前活动的多个执行环境在逻辑上造成一个栈结构。该逻辑栈的最顶层的执行环境称为当前运行的执行环境。任什么时候候,当控制器从当前运行的执行环境相关的可执行代码转入与该执行环境无关的可执行代码时,会建立一个新的执行环境。新建的这个执行环境会推入栈中,成为当前运行的执行环境.
这也是一个抽象的概念,在一段JavaScript代码中,会建立多个执行上下文,执行上下文定义了变量或函数有权访问的其余数据, ,经过阅读规范及相关文档,了解到执行上下文(简称EC)主要包括三个点,用伪代码表示以下:git
EC = { this: // 绑定this指向为当前执行上下文, 若是函数属于全局函数,则this指向window scopeChain: [] // 建立当前执行环境的做用域链, VO: {} // 当前环境的变量对象(Variable Object),每一个环境都有一个与之关联的变量对象 }
看下面这一段代码:github
var a = 1; function foo() { var b = 2; function bar() { console.log(b) } bar() console.log(a); } foo()
总结: 栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文数组
再举一个例子结合浏览器开发者工具来看看到底什么执行上线文浏览器
function foo() { bar() console.log('foo') } function bar() { baz() console.log('bar') } function baz() { debugger // 打断点观察执行上下文栈中的状况 }
能够看到当前baz正在执行,因此栈顶是baz的执行上下文,而栈底永远都是Global上下文ecmascript
继续执行,baz函数执行完成后,从执行上下文栈顶弹出,继续执行bar函数内后面的代码,bar函数执行完,bar的执行上下文从栈中弹出;而后执行foo函数后面的代码,foo函数执行完后,从执行上下文从栈中弹出;最后全局上下文从执行上下文从栈中弹出,清空执行上下文从栈。函数
每个执行环境都有一个与之关联的变量对象,是一个抽象的概念,环境中定义的全部变量和函数都保存在这个对象中。虽然咱们编写的代码没法访问这个对象,但解析器在处理数据时会在后台使用它们。
当浏览器第一次加载js脚本程序的时候, 默认进入全局执行环境, 这次的全局环境变量对象为window, 在代码中能够访问。工具
若是环境是函数, 则将此活动对象作为当前上下文的变量对象(VO = AO), 此时变量对象是不可经过代码来访问的,下面主要对活动对象进行讲解。
当函数一调用,马上建立当前上下文的活动对象, 并将活动对象做为变量对象,经过arguments属性初始化,值为arguments对象(传入的实参集合,与形参无关,形参作为局部环境的局部变量被定义)
AO = { arguments: <ArgO> };
arguments对象有如下属性:
function show (a, b, c) { // 经过Object.prototype.toString.call()精准判断类型, 证实arguments不一样于数组类型 var arr = [1, 2, 3]; console.log(Object.prototype.toString.call(arr)); // [object Array] console.log(Object.prototype.toString.call(arguments)); // [object Arguments] console.log(arguments.length) // 2 传递进来实参的个数 console.log(arguments.callee === show) // true 就是被调用的函数show自身 //参数共享 console.log(a === arguments[0]) // true a = 15; console.log(arguments[0]) // 15 arguments[0] = 25; console.log(a) // 25; 可是,对于没有传进来的参数c, 和arguments的第三个索引是不共享的 c = 25; console.log(arguments[2]) // undefined argument[2] = 35; console.log(c) // 25 } show(10, 20);
接着往下走,这才是关键的地方,执行环境的代码被分红两个阶段来处理:
函数若是被调用, 进入执行环境(上下文),并当即建立活动对象, 经过arguments属性初始化, 与此同时会扫描执行环境中的全部形参、全部函数声明、全部变量声明, 添加到活动对象(AO)中, 并肯定this的值,而后会开始执行代码。
在进入执行环境这个阶段:
全部形参声明:
形参名称做为活动对象属性被建立, 若是传递实参, 值就为实参值, 若是没有传递参数, 值就为undefined
全部函数声明:
函数名称做为活动对象的属性被建立,值是一个指针在内存中, 指向这个函数,若是变量对象已经存在相同名称的属性, 则彻底替换。
全部变量声明:
全部变量名称做为活动对象的属性被建立, 值为undefined,可是和函数声明不一样的是, 若是变量名称跟已经存在的属性(形式参数和函数)相同、则不会覆盖
function foo(a, b) { var c = 10; function d() { console.log('d'); } var e = function () { console.log('e'); }; (function f() {}) if (true) { var g = 20; } else { var h = 30; } } foo(10);
此时在进入foo函数执行上下文时,foo的活动对象fooAO为:
fooAO = { arguments: { 0: 10, length: 1 }, a: 10, b: undefined, c: undefined, d: <d reference> //指向d函数的指针, e: undefined, g: undefined, h: undefined // 虽然else中的代码永远不会执行,可是h仍然是活动对象中的属性 }
这个例子作以下几点说明:
在进入执行上下文阶段,活动对象拥有了属性,可是不少属性值为undefined, 到代码执行阶段就开始为这些属性赋值了
仍是上面的代码例子, 此时活动对象以下:
fooAO = { arguments: { 0: 10, length: 1 }, a: 10, b: undefined, c: 10, // 赋值为undefined d: <d reference> //指向d函数的指针, e: <d reference> // 指向e函数的指针 g: 20, h: undefined // 声明h变量,可是没有赋值 }
变量对象包括:{ arguments对象+函数形参+内部变量+函数声明(但不包含表达式) }
这时这个活动对象, 即做为当前执行环境的变量对象会被推到此执行环境做用域链的最前端(做用域链本篇不作介绍,会在下一篇文章中单独讲解做用域和做用域链), 假定执行环境为一个对象,则整个执行环境能够访问到的属性以下:
伪代码以下:
fooExecutionContext = { scopeChain: [], //fooAO +全部父执行环境的活动对象, fooAO: { arguments: { 0: 10, length: 1 }, a: 10, b: undefined, c: 10, // 赋值为undefined d: <d reference> //指向d函数的指针, e: <d reference> // 指向e函数的指针 g: 20, h: undefined }, this: 当前执行环境的上下文指针 }
补充:
下面的例子为了说明一下变量声明的顺序及变量同名不会影响函数声明
console.log(foo); // foo的函数体 var foo = 10; console.log(foo) // 10 function foo() {}; foo = 20; console.log(foo); // 20
在代码执行以前, 就会读取函数声明,变量声明的顺序在函数声明和形参声明以后, 整个流程以下:
1. 进入执行环境阶段:
1. var VO = {} 2. VO[foo] = 'foo函数指针' 3. 扫描到var foo = 10, // 可是foo作为function已经声明,因此变量声明不会影响同名的函数声明,若是代码中没有foo函数声明的话,则foo为undefined
代码执行阶段:
1. VO[foo] = 10; 2. VO[foo] = 20;
解析代码完成。
以上简单总结了下对执行上下文和变量对象的理解,主要在于记录总结一下学习成果,目前文章的水平实在不敢谈分享。若有理解不对的地方还请各位大神多多指教,想了解更深能够去查看本文最后主要参考资料的连接,都是经典啊,相信看完也就理解了。
本文主要参考资料:
JavaScript高级程序设计(第3版)
ECMAScript5.1中文版--执行环境
前端基础进阶(二):执行上下文详细图解
前端基础进阶(三):变量对象详解
深刻理解JavaScript系列(11):执行上下文(Execution Contexts)
深刻理解JavaScript系列(12):变量对象(Variable Object)