深入理解js之执行上下文 | 青训营笔记

56 阅读3分钟

什么是执行上下文

执行上下文可以简单理解为JavaScript代码执行的运行环境。在执行每段代码时,JavaScript引擎都会创建一个执行上下文来存储和管理代码运行过程中产生的变量、函数以及其他相关信息。每当遇到一个函数调用时,JavaScript引擎会为该函数创建一个新的执行上下文,并将其推入所谓的“执行上下文栈”中。当函数执行完毕后,引擎会将其对应的执行上下文从栈中弹出。这样,JavaScript引擎可以确保每个函数在独立的环境中运行,互不干扰。

总结起来,执行上下文可以分为三个主要部分:

  1. 变量对象(Variable Object):存储变量和函数声明。
  2. 作用域链(Scope Chain):确定变量的访问权限。
  3. this指针:指向当前执行上下文所属的对象。

执行上下文的创建过程

执行上下文的创建过程可以分为两个阶段:创建阶段和执行阶段。

创建阶段

在创建阶段,JavaScript引擎会执行以下操作:

  1. 创建变量对象:首先,引擎会为当前执行上下文创建一个变量对象。这个对象包含了当前执行上下文中所有的变量和函数声明。需要注意的是,这里只包含声明,而不包括具体的赋值操作。
  2. 创建作用域链:接下来,引擎会创建一个作用域链。作用域链是一个包含当前执行上下文和其所有父级上下文的变量对象的列表。这个列表用于确定变量的访问权限。
  3. 确定this指针的指向:最后,引擎会确定当前执行上下文的this指针的指向。在全局执行上下文中,this指向全局对象(通常是window对象);在函数执行上下文中,this的指向取决于函数的调用方式。

执行阶段

在执行阶段,JavaScript引擎会逐行执行代码。在这个过程中,引擎会完成变量赋值操作、函数调用以及其他相关操作。

示例

让我们通过一个简单的例子来理解执行上下文的创建和执行过程:

var x = 10;

function foo() {
  var y = 20;
  console.log(x + y);
}

foo();

在这段代码中,首先会创建一个全局执行上下文。在创建阶段,变量对象会存储变量x和函数foo的声明。接着,引擎会创建作用域链并确定this指针的指向。执行阶段开始后,变量x被赋值为10。

当调用foo函数时,JavaScript引擎会为该函数创建一个新的执行上下文,并将其推入执行上下文栈中。在创建阶段,变量对象会存储变量y的声明,作用域链会包含当前执行上下文的变量对象以及全局执行上下文的变量对象,this指针会根据函数调用方式进行确定。执行阶段开始后,变量y被赋值为20,然后执行console.log(x + y),输出结果为30。执行完毕后,foo函数的执行上下文从栈中弹出。