深入 JavaScript 作用域：从变量提升到执行上下文的底层逻辑

JavaScript 的作用域（Scope）不仅是变量"藏在哪里"的规则，更是理解 JavaScript 引擎如何编译、执行代码以及管理内存的钥匙。要真正掌握它，我们需要跳出"函数作用域"和"全局作用域"的表层概念，深入探究词法作用域（Lexical Scoping） 、执行上下文（Execution Context）以及ES6 块级作用域的底层实现。

---

一、 词法作用域：代码写在哪，作用域就在哪

JavaScript 采用的是词法作用域 （也称静态作用域）。这意味着，一个函数的作用域在函数定义时就已经确定了，而不是在函数调用时。

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo(); // 输出 1，而不是 2
}

bar();

深度解析：

当 foo 被定义时，JavaScript 引擎会创建一个作用域链（Scope Chain） 。这个链条包含了 foo 自身的变量对象以及所有外部（父级）作用域的变量对象。因为 foo 定义在全局，它的作用域链只包含全局对象。

当 bar 调用 foo 时，虽然 bar 内部有 value = 2，但 foo 并不关心谁调用了它，它只认自己定义时的词法环境。因此，foo 沿着作用域链向上查找，直接找到了全局的 value = 1。

---

二、 变量提升的真相：执行上下文的两个阶段

你提到的"变量提升"其实是 JavaScript 引擎编译阶段 的产物。现代 JavaScript 引擎（如 V8）在执行代码前，会先进行词法分析，创建执行上下文（Execution Context） 。

执行上下文的创建分为两个阶段：

1. 创建阶段（Creation Phase）： 引擎扫描当前作用域，将 var 声明的变量和 function 声明的函数存入变量环境（Variable Environment） ，并初始化为 undefined 或函数体。
2. 执行阶段（Execution Phase）： 引擎逐行执行代码，进行赋值操作。

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

底层视角：

在创建阶段，a 已经被放入了变量环境，值为 undefined。执行到 console.log 时，引擎从变量环境中取出 a，所以不会报错。只有当执行到 a = 10 时，变量环境中的 a 才被更新为 10。

---

三、 ES6 的革命：let/const 与块级作用域的底层实现

ES6 引入 let 和 const 后，JavaScript 拥有了真正的块级作用域。这在底层是如何实现的？

在 ES6 的执行上下文中，除了变量环境 （存放 var），还新增了一个词法环境（Lexical Environment） ，专门用来存放 let 和 const 声明的变量。

1. 暂时性死区（TDZ）的原理

console.log(b); // ReferenceError
let b = 10;

let 声明的变量虽然也会被提升，但在词法环境 中，它处于"未初始化"状态。只有当代码执行到 let b 这一行时，变量才会被初始化。在初始化之前访问，引擎会抛出 ReferenceError。这个从块级作用域开始到变量声明之前的区域，就是暂时性死区（Temporal Dead Zone） 。

2. 循环中的块级作用域

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// 输出 0, 1, 2

深度解析：

如果使用 var，i 存在于函数作用域的变量环境中，所有回调函数共享同一个 i。

但使用 let 时，JavaScript 引擎在每一次循环迭代 时，都会创建一个新的词法环境 ，并在其中绑定一个新的 i。因此，每个 setTimeout 回调捕获的都是当前迭代独有的 i 值。这是 ES6 规范中专门为 for 循环设计的特殊行为。

---

四、 闭包与内存：作用域链的持久化

闭包（Closure）的本质是函数与其词法环境的组合。

function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}
const counter = createCounter();

内存视角：

当 createCounter 执行完毕，按理说它的执行上下文应该被销毁。但是，内部返回的函数依然持有对 createCounter 词法环境的引用（即作用域链指向 count 所在的词法环境）。

只要外部变量 counter 还引用着这个内部函数，垃圾回收机制（GC）就无法回收 count 变量。这就是为什么闭包可以用来创建私有变量，但也容易导致内存泄漏。

---

五、 解构赋值的底层逻辑

解构赋值不仅仅是语法糖，它涉及到了 JavaScript 的**模式匹配（Pattern Matching）**机制。

let {name, age} = person;

执行过程：

1. 引擎检查右侧 person 是否为 null 或 undefined，如果是则抛出 TypeError。
2. 引擎在左侧识别出 {} 模式，知道这是对象解构。
3. 引擎依次查找右侧对象的 name 和 age 属性。
4. 将找到的值赋值给左侧对应的变量。如果属性不存在，变量被赋值为 undefined（除非指定了默认值）。

注意： let {x, y} = ... 和 {x, y} = ... 的区别在于，前者是声明+赋值 ，后者是纯赋值 。纯赋值时，如果直接写 {x, y} = ...，引擎会将 {x, y} 误判为代码块（Block Statement） ，导致语法错误。因此必须加括号 ({x, y} = ...) 来强制将其解析为表达式。

---

六、 总结与现代开发建议

1. 永远使用 let 和 const： 它们提供了块级作用域和暂时性死区，能有效避免变量污染和逻辑错误。const 用于声明不会重新赋值的变量（注意：对象属性仍可修改）。
2. 理解词法作用域： 不要混淆"定义时作用域"和"调用时作用域"。这是理解闭包和模块化的基础。
3. 警惕隐式全局变量： 在非严格模式下，未声明直接赋值（x = 10）会创建全局变量。务必开启 'use strict'。
4. 模块化是终极解决方案： 现代 JavaScript 使用 ES Module（import/export），每个模块都有独立的顶层作用域，彻底解决了全局命名冲突问题。

通过深入理解执行上下文、变量环境、词法环境以及作用域链，你不仅能写出更健壮的代码，还能在调试复杂问题时，像引擎一样精准地定位变量来源。