深度解析：执行上下文与执行上下文栈

前端

2023-11-17 16:25:06

在JavaScript中，执行上下文是代码执行的环境，它包含了当前正在执行的代码、变量和函数。执行上下文栈是存储所有执行上下文的环境，它可以让我们跟踪代码在不同地方的执行情况。

执行上下文分为全局执行上下文和局部执行上下文。全局执行上下文是第一个创建的执行上下文，它包含了所有在脚本最外层定义的变量和函数。局部执行上下文是为函数创建的，它包含了该函数中的变量和函数。

当一个函数被调用时，就会创建一个新的局部执行上下文，并把它压入执行上下文栈中。当函数执行完毕时，它的局部执行上下文就会被弹出执行上下文栈。

执行上下文栈可以让我们跟踪代码在不同地方的执行情况。例如，我们可以使用执行上下文栈来查看函数是如何被调用的，以及函数是如何返回的。

变量提升是指在执行代码之前，所有变量都会被提升到它们所属的执行上下文的顶部。这意味着变量可以在它们被声明之前使用。

函数提升是指在执行代码之前，所有函数都会被提升到它们所属的执行上下文的顶部。这意味着函数可以在它们被声明之前调用。

变量提升和函数提升是JavaScript中的两个重要概念，它们可以让我们在代码中使用变量和函数，而无需担心它们的声明顺序。

执行上下文与执行上下文栈示例

// 全局执行上下文
var globalVariable = 10;

function outerFunction() {
  // 局部执行上下文
  var localVariable = 20;

  function innerFunction() {
    // 局部执行上下文
    var innerVariable = 30;

    console.log(globalVariable); // 10
    console.log(localVariable); // 20
    console.log(innerVariable); // 30
  }

  innerFunction();
}

outerFunction();

在这个示例中，全局执行上下文包含了变量 globalVariable 和函数 outerFunction。当 outerFunction 被调用时，就会创建一个新的局部执行上下文，并把它压入执行上下文栈中。这个局部执行上下文包含了变量 localVariable 和函数 innerFunction。

当 innerFunction 被调用时，就会创建一个新的局部执行上下文，并把它压入执行上下文栈中。这个局部执行上下文包含了变量 innerVariable。

当 innerFunction 执行完毕时，它的局部执行上下文就会被弹出执行上下文栈。然后，当 outerFunction 执行完毕时，它的局部执行上下文也会被弹出执行上下文栈。

变量提升与函数提升示例

console.log(a); // undefined
var a = 10;

function b() {
  console.log(c); // undefined
  var c = 20;
}

b();
console.log(c); // ReferenceError: c is not defined