JS进阶系列之执行上下文

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:,
     a:undefined
}

执行阶段

VO->AO
AO={
      arguments:{},
     foo:,
     a:2
}

等同于

function test(){
      function foo(){
           return 2;
     }
     var a;
     console.log(a);
     console.log(foo());
     a = 1;
}
test();

通过上面知识的讲解，进一步了解到了变量提升和函数提升的底层原理，对后面知识的学习也做了铺垫。