一、什么是执行上下文

在JavaScript中，执行上下文指的是代码在执行时所处的环境。每当JavaScript代码被执行时，都会创建一个执行上下文。执行上下文包含了JavaScript代码执行所需的所有信息，如变量名、函数声明、参数等。一个执行上下文可以看作是一个对象，这个对象中的属性和方法都是当前代码执行时所需的。

二、执行上下文的类型

在JavaScript中，存在三种不同类型的执行上下文：

全局执行上下文： 该类型的执行上下文是在页面加载时创建的，JavaScript代码的最顶层，默认的全局执行上下文是window对象。
函数执行上下文： 每当执行一个函数时，都会创建一个函数执行上下文。函数执行上下文是在函数执行时创建的，并会在函数执行结束时销毁。
Eval函数执行上下文： 执行一个eval()函数时，都会创建一个Eval函数执行上下文。

三、执行上下文的生命周期

执行上下文的生命周期可以分为两个阶段：创建阶段和执行阶段。

1. 创建阶段

当JavaScript代码开始执行时，会先进入执行上下文的创建阶段，这个阶段会做以下操作：

创建变量对象（Variable Object）：为当前执行上下文创建一个变量对象，该变量对象中包含了当前执行上下文所需要的所有信息。
创建作用域链（Scope Chain）：将当前执行上下文的作用域链连接到变量对象上。
确定this的指向：在创建阶段，会确定this关键字的指向，this的指向是在函数被调用时确定的，全局执行上下文中this指向window对象。

2. 执行阶段

在创建阶段结束后，进入执行阶段，在该阶段中，JavaScript会一行一行执行代码。

四、变量对象

每个执行上下文都会有一个变量对象，在创建阶段被创建出来，作用是存储函数中定义的变量、函数声明、形参等信息。变量对象的类型分为三种：函数执行上下文中的变量对象、全局执行上下文中的变量对象和模块执行上下文中的变量对象。

1. 函数执行上下文的变量对象

在函数执行上下文中，变量对象分为两个部分：活动对象（Active Object）和变量声明部分（Variable Declarations）。其中，变量声明部分存储了函数中所有变量声明语句，活动对象则包含了函数形参、变量声明和函数声明。

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};
  b = 3;
}
foo(1);

上面的代码在foo函数执行上下文中，变量对象的结构如下所示：

{
  arguments: {
    0: 1,
    length: 1
  },
  b: undefined,
  c: reference to FunctionDeclaration "c",
  d: undefined
}

可以看到，函数形参被添加到活动对象中，变量声明语句只是在变量对象中添加了一个名称和一个undefined的值，函数声明则是直接将函数添加到变量对象中。

2. 全局执行上下文的变量对象

在全局执行上下文中，变量对象包含了全局对象window中所有属性、方法和全局函数的定义（如果有的话）。全局执行上下文中的变量对象称为全局对象。

var a = 1;
function foo() {}

在全局执行上下文中，变量对象的结构如下所示：

{
  window: reference to global object,
  a: 1,
  foo: reference to FunctionDeclaration "foo"
}

五、作用域链

作用域链是一个指向变量对象的指针列表，用于解析变量名。每当JavaScript代码执行进入一个新的执行上下文时，JavaScript会将当前执行上下文的变量对象添加到作用域链中。当代码中访问一个变量时，JavaScript会从当前执行上下文开始搜索作用域链，直到找到变量为止。如果整个作用域链都没有找到该变量，JavaScript会报错。

var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a + b + c);
  }
  bar();
}
foo();

在上面的代码中，当bar函数要访问变量a时，会先搜索自身的变量对象，如果没有找到则继续向上搜索父级执行上下文的变量对象，直到找到全局执行上下文的变量对象为止。在这个过程中，每个执行上下文的变量对象都会被添加到作用域链中，形成一个作用域链条。

六、this指向

this指向是JavaScript中一个非常重要的概念。this的值在函数被调用时确定，可以通过函数的调用方式来决定this的指向。

全局执行上下文中，this指向全局对象window。
函数的this指向：在函数执行时，其this指向由函数的调用方式所决定。函数调用方式决定了函数中this的指向：

作为对象的方法调用：this指向该对象。
作为函数调用：在非严格模式下，this指向全局对象window，在严格模式下，this指向undefined。
作为构造函数调用：this指向新创建的对象。
使用call或apply绑定this：this指向在call或apply中传入的对象。

var a = 1;
var obj = {
  a: 2,
  foo: function() {
    console.log(this.a);
  }
};
obj.foo(); // 输出2
var bar = obj.foo;
bar(); // 在非严格模式下输出1，在严格模式下输出undefined

在上面的代码中，obj.foo()调用时，this指向obj对象，而bar()调用时，this指向全局对象window。

七、总结

执行上下文是JavaScript运行时的基本概念之一，其作用是维护代码的执行环境。JavaScript中，存在三种不同类型的执行上下文：全局执行上下文、函数执行上下文和eval函数执行上下文。每个执行上下文都包含一个变量对象和一个作用域链，变量对象用于存储执行上下文中创建的所有变量、函数和形参等，作用域链用于解析变量名。JavaScript中，this的指向是根据函数的调用方式来决定的，包括作为对象方法、作为函数调用、作为构造函数调用以及使用call和apply绑定this。

执行上下文（Execution Context）的详解