JS进阶系列之执行上下文
2017-06-13 本文已影响0人
McRay
function test(){
console.log(a);//undefined;
var a = 1;
}
test();
也许你会遇到过上面这样的面试题，你只知道它考的是变量提升，但是具体的原理又知道吗？所以我觉得很有必要搞明白底层的原理，才能加深理解，其实围绕的就是
执行上下文的概念。
什么是执行上下文？
当控制器转到可执行的代码时，会进入该代码对应的执行上下文，可以理解为该代码对应的一个执行环境，就叫做执行上下文。
在JavaScript中运行环境有三种，分别是：
- 全局环境：JavaScript代码执行起来，首先就是进入全局环境。
- 函数环境：当函数被调用执行时，就会进入函数中执行。
- eval
所以在一个JavaScript程序中，就会产生多个不同的执行上下文，这时候就需要用到前面提到的栈数据结构来管理了，我们称之为调用栈。当代码在执行过程中，遇到上面说的三种情况，就会产生三种执行上下文，然后分别压入调用栈中，等一个执行上下文执行完毕，弹出栈，才能执行下一个执行上下文中的代码，这就是栈结构的特点。
执行上下文的特点
- 单线程，其实javascript就是单线程，所以很好理解。
- 同步执行，同步就是按顺序，不能同时执行。
- 全局上下文只有一个，它在浏览器关闭时才会弹出栈。
- 函数的执行上下文的数目没有限制。
- 每次某个函数被调用时，就会有新的执行上下文，即使是调用的自身函数。
demo01
function f1(){
var n = 999;
function f2(){
alert(n);
}
return f2;
}
var result = f1();
result();//999
我以上面这样一个例子讲解，执行上下文在调用栈中的创建过程
image.png
执行上下文的生命周期
image.png
如图所示，主要分为两个阶段，一个是创建阶段,一个是执行阶段。
创建阶段：
- 生成变量对象，后面会讲解
- 建立作用域链
- 确定this指向
执行阶段：
- 变量赋值
- 函数引用
- 执行其他代码
执行完毕后弹栈，等待回收
变量对象和活动对象的区别就在于，执行周期不一样，在创建阶段叫做变量对象，在执行阶段叫做活动对象。
变量对象
image.png
变量对象的创建主要有三个阶段：
- 1、创建arguments对象。
- 2、检查function函数声明创建属性。在VO对象中以函数名建立一个属性，属性值为函数的地址。如果函数名的属性已经存在了，那么该属性将会被新的引用所覆盖。
- 3、检查var变量声明创建属性。在VO对象中以变量名建立一个属性，属性值为
undefined。为了防止同名的属性值会被修改为undefined，则会直接跳过，原属性值不会被修改。
举个变量提升和函数提升的例子，就明白了
demo02
function test(){
console.log(a);
console.log(foo());
var a = 1;
function foo(){
return 2;
}
}
test();
这是一个典型的变量提升和函数提升的例子，最后会输出undefined和2,接下来以执行上下文的生命周期来讲解，
创建过程
testEC = {
VO:{},
scopeChain:{},
this:{}
}
VO = {
arguments:{},
foo:<foo reference>,
a:undefined
}
执行阶段
VO->AO
AO={
arguments:{},
foo:<foo reference>,
a:2
}
等同于
function test(){
function foo(){
return 2;
}
var a;
console.log(a);
console.log(foo());
a = 1;
}
test();
通过上面知识的讲解，进一步了解到了变量提升和函数提升的底层原理，对后面知识的学习也做了铺垫。
