你不知道的 JavaScript

执行上下文 & 作用域链

概念

• 作用域是一套规则，程序根据这套规则来存储变量，并且能在之后对这个变量的值进行访问或修改。
• 执行上下文是 JS 代码运行时的环境，包含变量环境、作用域链和 this，在创建阶段完成变量提升，在执行阶段逐行运行代码，并通过调用栈进行管理。

原理解析

• JS 是词法作用域（静态作用域） 词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的。
• 作用域在定义时确定，而不是执行时
• 执行上下文包含：
  • 变量环境（var）
  • 词法环境（let / const）
  • this 绑定

示例代码

var a = 1;

function foo() {
  var b = 2;

  function bar() {
    console.log(a, b);
  }

  return bar;
}

var fn = foo();
fn();

                 🌍 全局执行上下文（Global EC）
┌──────────────────────────────────────────────┐
│ 变量环境：                                    │
│   a = 1                                      │
│   foo = function                             │
│                                              │
│ 作用域链： null                               │
│ this → window                                │
└──────────────────────────────────────────────┘
                     ↓ 调用 foo()

        📦 foo 执行上下文（Function EC）
┌──────────────────────────────────────────────┐
│ 变量环境：                                    │
│   b = 2                                      │
│   bar = function                             │
│                                              │
│ 作用域链： → 指向 Global EC                   │
│ this → window                                │
└──────────────────────────────────────────────┘
                     ↓ 调用 bar()

        📦 bar 执行上下文（Function EC）
┌──────────────────────────────────────────────┐
│ 变量环境：                                    │
│   （无局部变量）                              │
│                                              │
│ 作用域链： → foo EC → Global EC               │
│ this → window                                │
└──────────────────────────────────────────────┘