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

一、什么是执行上下文

在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。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309028.html