一, 执行上下文概念
JavaScript 代码的执行过程分为两个阶段:
代码编译阶段: 由编译器完成, 将代码翻译成可执行代码
代码执行阶段: 由引擎完成, 主要任务是执行可执行代码
其中可执行代码分为三种: 全局代码, 函数代码, eval 代码
有关 JavaScript 代码的执行过程可查看《[你不知道的 JavaScript] (一) 作用域与词法作用域》一文.
简单来说, 当在代码执行阶段执行到一个函数的时候, 就会进行准备工作, 这里的 "准备工作", 就叫做 "执行上下文 (EC)", 也叫执行上下文环境, 也叫执行环境.
当 JavaScript 代码执行时, 会进入不同的执行上下文, 而每个执行上下文的组成, 基本如下:
当前执行上下文 (EC)
二, 执行上下文生命周期
当调用一个函数时 (激活), 一个新的执行上下文就会被创建. 而一个执行上下文的生命周期可以分为两个阶段:
创建阶段: 在这个阶段中, 执行上下文会分别创建变量对象, 建立作用域链, 以及确定 this 的指向.
执行阶段: 创建完成之后, 就会开始执行代码, 这个时候, 会完成变量赋值, 函数引用, 以及执行其他代码.
执行上下文生命周期
详细了解执行上下文极为重要, 因为其中涉及到了变量对象, 作用域链, this 等极为重要的概念, 它关系到我们能不能真正理解 JavaScript, 下面我们分别了解几个概念.
(一) 变量对象
1. 变量对象的创建过程
(1) 建立 arguments 对象. 检查当前上下文中的参数, 建立该对象下的属性与属性值.
(2) 检查当前上下文的函数声明, 也就是使用 function 关键字声明的函数. 在变量对象中以函数名建立一个属性, 属性值为指向该函数所在内存地址的引用. 如果函数名的属性已经存在, 那么该属性将会被新的引用所覆盖.
(3) 检查当前上下文中的变量声明, 每找到一个变量声明, 就在变量对象中以变量名建立一个属性, 属性值为 undefined. 如果该变量名的属性已经存在, 为了防止同名的函数被修改为 undefined, 则会直接跳过, 原属性值不会被修改.
变量对象创建过程
- function foo() {
- console.log('function foo')
- }
- var foo = 20;
- console.log(foo); // 20
- // ↑以上代码中, 变量声明的 foo 遇到函数声明的 foo 会跳过,
- // 可是为什么最后 foo 的输出结果仍然是被覆盖了呢?
- // 那是因为三条规则仅仅适用于变量对象的创建过程, 也就是执行上下文的创建过程.
- // 而 foo=20 是在执行上下文的执行过程中运行的, 输出结果自然会是 20.
再来看另外一个例子:
- console.log(foo); // ƒ foo() {
- console.log('function foo')
- }
- function foo() {
- console.log('function foo')
- }
- var foo = 20;
- // 上栗的执行顺序为
- // 首先将所有函数声明放入变量对象中
- function foo() {
- console.log('function foo')
- }
- // 其次将所有变量声明放入变量对象中,
- // 但是因为 foo 已经存在同名函数, 因此此时会跳过 undefined 的赋值
- // var foo = undefined;
- // 然后开始执行阶段代码的执行
- console.log(foo); // function foo
- foo = 20;
2. 变量对象与活动对象
变量对象与活动对象其实都是同一个对象, 只是处于执行上下文的不同生命周期. 不过只有处于函数调用栈栈顶的执行上下文中的变量对象, 才会变成活动对象.
- function test() {
- console.log(a);
- console.log(foo());
- var a = 1;
- function foo() {
- return 2;
- }
- }
- test();
↑以上代码中, 全局作用域中运行 test() 时, test() 的执行上下文开始创建. 为了便于理解, 我们用如下的形式来表示:
- // 创建过程
- testEC = {
- // VO 为 Variable Object 的缩写, 即变量对象
- VO: {
- // 注: 在浏览器的展示中, 函数的参数可能并不是放在 arguments 对象中,
- // 这里为了方便理解, 我做了这样的处理
- arguments: {...},
- foo: <foo reference>, // 表示 foo 的地址引用
- a: undefined,
- this: Windows
- },
- scopeChain: {}
- }
未进入执行阶段之前, 变量对象中的属性都不能访问! 但是进入执行阶段之后, 变量对象转变为了活动对象, 里面的属性都能被访问了, 然后开始进行执行阶段的操作.
- // 执行阶段
- VO -> AO // Active Object
- AO = {
- arguments: {...},
- foo: <foo reference>,
- a: 1,
- this: Windows
- }
因此, 上面例子的执行顺序如下:
- function test() {
- function foo() {
- return 2;
- }
- var a;
- console.log(a); // undefined
- console.log(foo()); // 2
- a = 1;
- }
- test();
3. 全局上下文的变量对象
全局上下文有一个特殊的地方, 它的变量对象, 就是 Windows 对象. 而这个特殊, 在 this 指向上也同样适用, this 也是指向 Windows.
除此之外, 全局上下文的生命周期, 与程序的生命周期一致, 只要程序运行不结束, 比如关掉浏览器窗口, 全局上下文就会一直存在. 其他所有的上下文环境, 都能直接访问全局上下文的属性.
(二) 作用域链
作用域链本质上是一个指向当前环境与上层环境的一系列变量对象的指针列表 (它只引用但不实际包含变量对象), 作用域链保证了当前执行环境对符合访问权限的变量和函数的有序访问.
- var a = 1;
- function out() {
- var b = 2;
- function inner() {
- var c = 3;
- console.log(a+b+c);
- }
- inner();
- }
- out();
首先, 代码开始运行时就创建了全局上下文环境, 接着运行到 out() 时创建 out 函数的执行上下文, 最后运行到 inner() 时创建 inner 函数的执行上下文, 我们设定他们的变量对象分别为 VO(global),VO(out), VO(inner).
我们可以直接用一个数组来表示作用域链, 数组的第一项 scopeChain[0] 为作用域链的最前端, 而数组的最后一项, 为作用域链的最末端, 所有的最末端都为全局变量对象.
全局的作用域链: 由于它只含全局作用域, 没有上级, 因此它的作用域链只指向本身的全局变量对象. 查找标识符时只能从本身的全局变量对象中查找.
- // 全局上下文环境
- globalEC = {
- VO: {
- out: <out reference>, // 表示 out 的地址引用
- a: undefined
- },
- scopeChain: [VO(global)], // 作用域链
- }
函数 out 的作用域链: 可以引用函数 out 本身的变量对象以及全局的变量对象. 查找标识符时, 先在函数 out 变量对象中寻找, 找不到的话再去上一级全局变量对象查找.
- // out 函数的执行上下文
- outEC = {
- VO: {
- arguments: {...},
- inner: <inner reference>, // 表示 inner 的地址引用
- b: undefined
- },
- scopeChain: [VO(out), VO(global)], // 作用域链
- }
函数 out 作用域链
函数 inner 的作用域链: 可以引用函数 inner 本身的变量对象和上一级 out 函数的变量对象以及全局的变量对象. 查找标识符时依次从 inner,out, 全局变量对象中查找.
- innerEC = {
- VO: {
- arguments: {...},
- c: undefined,
- }, // 变量对象
- scopeChain: [VO(inner), VO(out), VO(global)], // 作用域链
- }
函数 inner 作用域链
(三)this 指向
this 的指向比较复杂, 后面会单独一篇文章细讲, 这里就不多说啦!
三, 执行上下文栈
执行上下文可以理解为当前代码的执行环境, JavaScript 中的运行环境大概包括三种情况:
全局环境: JavaScript 代码运行起来会首先进入该环境
函数环境: 当函数被调用执行时, 会进入当前函数中执行代码
eval
在代码开始执行时, 首先会产生一个全局执行上下文环境, 调用函数时, 会产生函数执行上下文环境, 函数调用完成后, 它的执行上下文环境以及其中的数据都会被销毁, 重新回到全局执行环境, 网页关闭后全局执行环境也会销毁. 其实这是一个压栈出栈的过程, 全局上下文环境永远在栈底, 而当前正在执行的函数上下文在栈顶.
- var a = 1; //1. 进入全局上下文环境
- function out() {
- var b = 2;
- function inner() {
- var c = 3;
- console.log(a+b+c);
- }
- inner(); //3. 进入 inner 函数上下文环境
- }
- out(); //2. 进入 out 函数上下文环境
↑以上代码的执行会经历以下过程:
当代码开始执行时就创建全局执行上下文环境, 全局上下文入栈.
全局上下文入栈后, 其中的代码开始执行, 进行赋值, 函数调用等操作, 执行到 out() 时, 激活函数 out 创建自己的执行上下文环境, out 函数上下文入栈.
out 函数上下文入栈后, 其中的代码开始执行, 进行赋值, 函数调用等操作, 执行到 inner() 时, 激活函数 inner 创建自己的执行上下文环境, inner 函数上下文入栈.
inner 函数上下文入栈后, 其中的代码开始执行, 进行赋值, 函数调用, 打印等操作, 由于里面没有可以生成其他执行上下文的需要, 所有代码执行完毕后, inner 函数上下文出栈.
inner 函数上下文出栈, 又回到了 out 函数执行上下文环境, 接着执行 out 函数中后面剩下的代码, 由于后面没有可以生成其他执行上下文的需要, 所有代码执行完毕后, out 函数上下文出栈.
out 函数上下文出栈后, 又回到了全局执行上下文环境, 直到浏览器窗口关闭, 全局上下文出栈.
执行上下文入栈出栈的全过程
我们可以得到一些结论:
全局上下文在代码开始执行时就创建, 只有唯一的一个, 永远在栈底, 浏览器窗口关闭时出栈.
函数被调用的时候创建上下文环境.
只有栈顶的上下文处于活动状态, 执行其中的代码.
来源: http://www.jianshu.com/p/a6e8d2bf1ca0