JavaScript变量函数提升全解析

JavaScript中的“提升”（Hoisting）并非代码物理移动，而是引擎在编译阶段将var和function声明的**声明部分**提前至作用域顶部处理，但赋值仍保留在原位置——这导致var变量声明前访问得undefined、function声明可提前调用，而function表达式和let/const则受限于变量声明提升不完整或暂时性死区（TDZ），访问即报错；理解不同声明方式（var/function/let/const/class）在提升时机、作用域影响和错误行为上的本质差异，是避免隐蔽bug、写出可预测代码的关键。

JavaScript提升（Hoisting）到底是什么

提升不是代码真的被“移动”到顶部，而是 JavaScript 引擎在编译阶段把 var 声明和 function 声明的**声明部分**提前到作用域顶部处理，但赋值或初始化仍保留在原位置。这意味着你能在声明前访问变量（值为 undefined）或调用函数（正常执行），但背后机制完全不同。

var 声明的提升表现和陷阱

var 只提升声明，不提升赋值。访问未初始化的 var 变量会得到 undefined，而不是报错——这常掩盖逻辑错误。

• 重复 var 声明不会报错，后一次只是重新赋值，不是新声明
• 在块级作用域（如 if、for）中用 var，变量仍属于外层函数/全局作用域
• console.log(a); var a = 1; 输出 undefined，不是 ReferenceError

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

function 声明 vs function 表达式的提升差异

只有 function **声明语句**（即以 function 关键字开头、有名字、独立成句）会被完全提升：声明 + 函数体都可用。而 function 表达式（赋值给变量）只提升变量声明（var fn），不提升赋值（= function() {...}），所以调用会报 TypeError。

• foo(); function foo() { } ✅ 正常运行
• bar(); var bar = function() { }; ❌ 报 TypeError: bar is not a function
• const baz = function() { }; 不提升，声明前访问直接 ReferenceError

foo(); // OK
function foo() { return 'declared'; }

bar(); // TypeError
var bar = function() { return 'expressed'; };

let 和 const 根本不提升？其实有“暂时性死区”

let 和 const 声明确实会被引擎记录，但它们在声明前不可访问——从作用域开始到声明语句之间，是“暂时性死区”（TDZ）。这不是不提升，而是提升后拒绝访问，抛出 ReferenceError。

• console.log(x); let x = 1; 立即报错，不输出 undefined
• TDZ 包含 typeof 检查：typeof x 在声明前也会报错（区别于 var 的 "undefined"）
• 类声明（class）也受 TDZ 约束，且必须先声明再使用

console.log(y); // ReferenceError
let y = 2;

真正容易被忽略的是：提升行为只发生在**声明所在的作用域内**，且不同声明类型（var / function / let）的提升规则互不兼容。混用时，比如在 if 块里写 var 和 let，它们的可见性范围和提升时机完全不同，调试起来往往要翻作用域链和编译阶段日志。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript变量函数提升全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。