什么是变量提升_javascript中如何理解这一概念？-js教程-PHP中文网

什么是变量提升_javascript中如何理解这一概念？

夜晨

发布： 2025-12-15 10:56:03

原创

831人浏览过

变量提升指声明被移至作用域顶部但赋值不提升；var 声明初始化为 undefined，let/const 存在暂时性死区（TDZ），函数声明完全提升而函数表达式仅变量名提升。

什么是变量提升_javascript中如何理解这一概念？

变量提升（Hoisting）是 JavaScript 中一个容易让人困惑的概念，它指的是变量和函数声明在代码执行前被“移动”到当前作用域顶部的现象。注意：只是声明被提升，赋值不会。

变量声明会被提升，但初始化不会

用 var 声明的变量，JavaScript 引擎会在编译阶段把声明部分“提到”作用域开头，但赋值语句仍保留在原位置。

例如：

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

登录后复制

实际等价于：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

let 和 const 不会变量提升？不准确，是存在“暂时性死区”

let 和 const 的声明也会被提升，但它们不会被初始化（不像 var 初始化为 undefined），在声明前访问会直接报错 ReferenceError。

TabTab AI

首个全链路 Data Agent，让数据搜集、处理到深度分析一步到位。

326

查看详情

比如：

console.log(b); // ReferenceError: Cannot access 'b' before initialization  
let b = 20;

登录后复制

这个区域就叫“暂时性死区”（Temporal Dead Zone, TDZ）——从作用域开始到声明语句出现前的这段范围。

函数声明和函数表达式提升行为不同

函数声明（function foo() {...}）会被完整提升：声明 + 定义都到顶部，可以提前调用
函数表达式（var foo = function() {...}）只提升变量名（var 那部分），赋值（function 部分）不提升，提前调用会报 TypeError

示例对比：

foo(); // OK，输出 "hello"  
function foo() { console.log("hello"); }  

bar(); // TypeError: bar is not a function  
var bar = function() { console.log("world"); };

登录后复制

如何避免被提升搞糊涂？

始终先声明再使用，养成习惯
优先使用 let/const 替代 var，减少意外提升带来的问题
函数尽量用声明形式（如果需要提升调用），或明确放在调用之前
借助 ESLint 等工具检测潜在的 TDZ 访问

基本上就这些。理解提升的关键不是记住“被提上去了”，而是清楚“声明在哪、初始化在哪、能不能访问”。

以上就是什么是变量提升_javascript中如何理解这一概念？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何优化javascript性能_常见的性能瓶颈有哪些？ JavaScript中的Promise是什么_如何使用它处理异步操作？ JavaScript代码覆盖率_javascript测试指标如何用Javascript进行数据可视化？ JavaScript new操作符做了什么_它如何创建实例？