JavaScript执行上下文详解

执行上下文是JavaScript中一个关键的概念，它定义了代码在运行时的环境和范围。了解执行上下文对于理解变量的作用域、作用域链以及代码的执行顺序至关重要。

1. 什么是执行上下文

2. 执行上下文的类型

3. 执行上下文的生命周期

1. 执行上下文的定义

执行上下文是JavaScript代码执行时的环境抽象，它包括变量对象、作用域链、this指向等信息。每当执行一段可执行代码（例如函数、全局代码）时，就会进入一个新的执行上下文。

2. 执行上下文的类型

JavaScript中有三种执行上下文类型：

2.1 全局执行上下文

全局执行上下文是默认的、最外层的执行上下文。它在整个页面生存周期内存在，负责全局变量的声明和函数的执行。

var globalVar = "I am global"; // 全局变量
function globalFunction() {
  console.log("I am a global function");
}
globalFunction(); // 输出：I am a global function

2.2 函数执行上下文

每当调用一个函数时，都会创建一个新的函数执行上下文。函数执行上下文在函数执行结束后被销毁。

function example() {
  var localVar = "I am local"; // 局部变量
  console.log(localVar);
}

example(); // 输出：I am local

2.3 Eval执行上下文

eval函数执行的代码会在一个新的执行上下文中运行，被称为Eval执行上下文。但由于使用eval存在安全和性能问题，应尽量避免使用。

eval("var evalVar = 'I am from eval';");
console.log(evalVar); // 输出：I am from eval

3. 执行上下文的生命周期

执行上下文的生命周期包括两个阶段：创建阶段（Creation Phase）和执行阶段（Execution Phase）。

3.1 创建阶段

在创建阶段，会按照以下步骤进行：

1. 创建变量对象（VO）：根据上下文的类型创建一个空的变量对象。
2. 建立作用域链：作用域链是一个指向父级作用域的链表，用于查找变量的值。
3. 确定this指向：在全局上下文中， this指向全局对象（如 window）。在函数上下文中， this的值取决于函数的调用方式。
4. 初始化变量对象：将函数的参数、函数声明和变量添加到变量对象中。

3.2 执行阶段

在执行阶段，会按照以下步骤进行：

1. 执行代码：按照代码的顺序执行，对变量赋值等操作。
2. 访问变量：通过作用域链查找变量的值。
3. 执行函数：在函数上下文中，执行函数体内的代码。

var globalVar = "I am global";

function example() {
  var localVar = "I am local";
  console.log(globalVar); // 输出：I am global
  console.log(localVar);  // 输出：I am local
}

example();

在上述例子中，example函数执行时，会创建函数执行上下文，其中包括全局变量和局部变量。

本文由 mdnice 多平台发布