JavaScript ：变量提升的原理、行为与陷阱变量提升（Hoisting）——JavaScript 的核心特性之一，

变量提升（Hoisting）——JavaScript 的核心特性之一，也是开发时必须掌握的基础概念，它描述了变量和函数声明在代码执行前被 “提升” 到当前作用域顶部的行为。

一、变量提升的本质：声明与初始化的分离

1.1 声明与初始化的差异

JavaScript 引擎在代码执行前会进行 预解析（Parsing） ，这个过程会将所有变量和函数声明“移动”到作用域顶部，但 变量的赋值不会被提升，仅声明部分被提升。

示例：`var` 声明的变量

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

解析：

引擎会将变量 a 的声明提升到作用域顶部，但赋值保留在原地。
上述示例实际执行顺序等价于：

var a;        // 声明被提升
console.log(a); // 输出 undefined
a = 10;       // 赋值留在原地

1.2 变量提升的两个阶段：编译 vs 执行

JavaScript 代码执行分为两个阶段：

编译阶段（预解析）
- JavaScript 引擎扫描代码，找到所有变量和函数声明，并将它们“提升”到作用域顶部。
- var 声明的变量会被初始化为 undefined。
- 函数声明（function foo() {}）会被完全提升（包括函数体）。
- let/const 声明的变量会进入“暂时性死区”（TDZ），直到声明语句执行。
执行阶段
- 代码按顺序执行，赋值操作发生。
- 在 TDZ 中的 let/const 变量在此阶段才会被赋值。

1.3 函数声明的提升

函数声明的整个定义（包括函数体）会被提升，而函数表达式仅声明部分被提升。

示例：函数声明 vs 函数表达式

// 函数声明：整个函数被提升
foo(); // 正常调用，输出 "Hello"
function foo() {
    console.log("Hello");
}

// 函数表达式：仅声明被提升
bar(); // 报错：TypeError（bar is not a function）
var bar = function() {
    console.log("World");
};

解析：

函数声明：foo 的定义在预解析阶段被完整提升，因此调用合法。
函数表达式：bar 的声明被提升（var bar），但赋值（bar = function() {...}）留在原地。此时 bar 的值为 undefined，调用会报错。

就像是你直接预订了整张桌子并准备了菜单；函数表达式则像服务员一样先告诉你有桌子（声明），但是菜单需要稍后送来。

二、`var` 与 `let`/`const` 的提升差异

2.1 `var` 的变量提升

var 声明的变量在函数作用域或全局作用域中提升，且赋值默认为 undefined。

示例：`var` 在循环中的陷阱

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出 3, 3, 3
    }, 100);
}

解析：

var 的函数作用域导致所有回调函数共享同一个 i。
循环结束后，i 的值为 3，所有回调函数输出 3。

解决方案：
使用 let 替代 var，利用块级作用域为每次迭代创建独立的变量副本。

2.2 `let`/`const` 的变量提升与 TDZ（暂时性死区）

let 和 const 声明的变量也会被提升，但 不会被初始化，处于 暂时性死区（Temporal Dead Zone, TDZ） 中，直到代码执行到声明语句。

示例：`let` 的 TDZ

console.log(b); // 报错：ReferenceError（TDZ）
let b = 20;

解析：

b 的声明被提升，但未被初始化。在声明前访问会触发错误。
实际执行顺序和原本相同，在输出之后进行的初始化，所以输出时无法获取后来赋予的值。
```
console.log(b); // 报错
let b = 20;     // 退出 TDZ
```

三、变量提升的底层机制：执行上下文与变量环境

JavaScript 引擎通过 执行上下文（Execution Context） 管理变量和函数的生命周期。每个执行上下文包含以下组件：

变量环境（Variable Environment） ：存储变量和函数的声明。
词法作用域（Lexical Scope） ：决定变量的查找路径。
作用域链（Scope Chain） ：变量查找的路径链。

与执行上下文相关的文章可阅览：《JavaScript ：执行机制详解，从底层原理到实际应用》

执行流程：

预解析阶段：
- 扫描代码，提升所有 var、function 声明。
- 初始化 var 变量为 undefined，let/const 变量进入 TDZ。
代码执行阶段：
- 按顺序执行代码，变量赋值和函数调用发生在预解析之后。

示例：嵌套作用域中的变量提升

function outer() {
    console.log(a); // undefined（函数作用域的 a）
    var a = 10;
    console.log(b); // 报错：ReferenceError（TDZ）
    let b = 20;
}

outer();

解析：

outer 函数内部的 var a 被提升到函数作用域顶部，赋值为 undefined。
let b 被提升但处于 TDZ，访问时抛出错误。

四、变量提升的陷阱与开发建议

4.1 避免变量提升导致的逻辑错误

陷阱 1：变量覆盖

var x = 1;
function foo() {
    console.log(x); // undefined（函数作用域的 x 覆盖全局）
    var x = 2;
}
foo();

解析：

函数内部的 var x 被提升，覆盖了全局变量 x。
第一个 console.log(x) 输出 undefined，而非 1。

陷阱 2：函数声明与变量声明的优先级

var foo = 1;
function foo() {
    console.log(2);
}
console.log(foo); // 输出 1（变量声明覆盖函数声明）

解析：

函数声明和变量声明都会被提升，但 函数声明的优先级高于变量声明。
最终变量 foo 的值为 1，而非函数 foo。

4.2 建议

显式声明变量：始终使用 let/const 替代 var，避免函数作用域的意外覆盖。
提前声明变量：在函数或块作用域的顶部集中声明变量，减少 TDZ 的风险。
严格模式（Strict Mode） ：启用 "use strict"，禁止未声明的变量赋值，避免全局污染。
模块化开发：利用 IIFE（立即执行函数表达式）或 ES6 模块封装作用域，减少全局变量。

五、总结

变量提升是 JavaScript 引擎在预解析阶段处理变量和函数声明的机制。var 声明的变量会被提升并初始化为 undefined，而 let/const 声明的变量虽然被提升，但会进入 TDZ，直到声明语句执行。

以上内容为作者个人理解，如果发现内容有误，欢迎各位读者在评论区指正。

最后，创作不易，如果觉得这篇文章对你有所帮助，不妨动动手指，点赞 + 收藏 ！🌟

JavaScript ：变量提升的原理、行为与陷阱