javascript Hoisting是什么_变量提升如何影响代码-js教程-PHP中文网

javascript Hoisting是什么_变量提升如何影响代码

夢幻星辰

发布： 2025-12-23 21:13:13

原创

996人浏览过

JavaScript中var声明提升并初始化为undefined，let/const声明提升但存在TDZ导致ReferenceError，函数声明完全提升而函数表达式仅变量名提升，推荐显式声明在使用前。

javascript hoisting是什么_变量提升如何影响代码

Hoisting（变量提升）是 JavaScript 引擎在执行代码前，将变量声明和函数声明“移动”到当前作用域顶部的行为——但注意，只有声明被提升，赋值不会。

var 声明会被提升并初始化为 undefined

使用 var 声明的变量，JavaScript 会把声明部分（不是赋值）提到作用域开头，并默认赋值为 undefined。所以可以在声明前访问，但值是 undefined：

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

登录后复制

引擎实际处理类似：var a; console.log(a); a = 10;
这容易导致意外的 undefined 行为，尤其在条件分支中误判变量是否存在

let 和 const 声明会被提升但不初始化（存在暂时性死区 TDZ）

let 和 const 的声明会被提升，但引擎不会初始化它们。从作用域开始到真正声明语句之间，访问这些变量会抛出 ReferenceError：

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

登录后复制

TDZ（Temporal Dead Zone）的存在让错误更早暴露，有助于避免静默 bug
即使用 typeof 检测也会报错，不同于 var 的返回 "undefined"

函数声明会被完全提升（声明 + 定义），函数表达式只提升变量名

函数声明（function foo() {...}）会被整个提升，可安全地在声明前调用；而函数表达式（const bar = function() {...}）只遵循对应变量的提升规则：

Studio Global

Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405

查看详情

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

foo(); // 正常运行，输出 "hello"  
function foo() { console.log("hello"); }

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

登录后复制

箭头函数、class 声明也属于“声明式语法”，但 class 同样受 TDZ 约束
推荐优先使用函数声明或明确放在调用之前，避免依赖提升行为

提升只发生在声明，不影响作用域和执行顺序

提升不会改变代码块结构或作用域链。比如 if 块内用 var 声明，变量仍属于外层函数作用域；let 则严格绑定块级作用域：

function test() {
  if (false) { var x = 1; }
  console.log(x); // undefined —— x 被提升到函数顶部，但未赋值
}

登录后复制

块级声明（let/const）不会泄漏到块外，即便写在 if 或 for 中
不要靠提升来组织逻辑，显式声明在使用前更清晰、更可靠

以上就是javascript Hoisting是什么_变量提升如何影响代码的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何测试javascript代码_单元测试和集成测试有何不同 javascript如何实现爬虫_怎样用Puppeteer抓取动态网页 javascript Promise是什么_如何使用它处理异步 javascript的严格模式是什么_它如何影响代码执行？ JavaScript如何实现深拷贝与浅拷贝？