JS基础-执行上下文和执行栈-螺旋式揭秘现代JavaScript

2023-10-22 14:56:14

在JavaScript中，执行上下文和执行栈是两个重要的概念，它们共同决定了代码的执行方式。

执行上下文(Execution Context)
- 执行上下文是代码执行时创建的环境，它定义了变量、函数和对象的作用域。
- 当代码执行时，会创建一个新的执行上下文，该上下文包含以下信息：
  - 变量环境： 包含当前执行上下文中声明的所有变量及其值。
  - 作用域链： 定义了当前执行上下文可以访问的变量和函数的作用域。
  - this： 指向当前执行上下文的this对象。
  - 函数环境： 包含当前正在执行的函数的参数及其值。
  - 代码： 要执行的代码。
执行栈(Call Stack)
- 执行栈是一个数据结构，它存储着当前正在执行的函数及其执行上下文。
- 当一个函数被调用时，会将该函数的执行上下文推入执行栈中。
- 当函数执行完毕时，会将该函数的执行上下文从执行栈中弹出。
- 执行栈总是包含当前正在执行的函数的执行上下文。
执行过程
- JavaScript代码的执行是从全局上下文的执行开始的。
- 当一个函数被调用时，会创建一个新的执行上下文，并将其推入执行栈中。
- 函数的代码在该执行上下文中执行。
- 当函数执行完毕时，会将该函数的执行上下文从执行栈中弹出。
- 然后，继续执行下一个函数的代码。

作用域和闭包

作用域： 变量和函数的作用域由执行上下文决定。
闭包： 闭包是JavaScript中的一种特殊函数，它可以访问其创建时所在作用域中的变量和函数。

执行上下文和执行栈实例

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

function outerFunction() {
  // 外部函数上下文
  var outerVariable = 20;

  function innerFunction() {
    // 内部函数上下文
    var innerVariable = 30;

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

  innerFunction();
}

outerFunction();