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

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

变量提升只提升声明，不提升赋值

使用 var 声明的变量，会被提升到作用域顶部，并初始化为 undefined；而 let 和 const 虽然也存在声明提升，但它们处于“暂时性死区”（TDZ），在声明前访问会直接报错（ReferenceError）。

• var a = 10; 等价于先 var a;（提升），再 a = 10;（赋值）
• console.log(a); var a = 10; 输出 undefined，不是报错
• console.log(b); let b = 20; 直接抛出 ReferenceError

函数声明会被完全提升，函数表达式不会

函数声明（function foo() {...}）会被完整提升，包括函数体，因此可以在声明前调用；而函数表达式（var foo = function() {...}）只是变量声明被提升，赋值仍保留在原位置。

• foo(); function foo() { console.log('ok'); } 正常输出 'ok'
• bar(); var bar = function() { console.log('no'); }; 报错：TypeError: bar is not a function（因为 bar 被提升为 undefined）

不同声明方式的影响对比

现代开发中推荐优先使用 const 和 let，它们更符合直觉、减少意外行为。

• var：变量可重复声明，存在变量提升 + 初始化为 undefined，易引发静默 bug
• let：块级作用域，声明提升但不可访问（TDZ），禁止重复声明
• const：同 let，且必须初始化，赋值后不可重新赋值（引用类型可改内部属性）

如何避免变量提升带来的问题

养成良好的声明习惯，能大幅降低由提升引发的困惑和错误。

• 所有变量和函数尽量在作用域开头统一声明（尤其用 var 时）
• 优先使用 const，需要重新赋值再用 let，避免 var
• 函数尽量用声明形式（如需条件定义，可用立即执行函数或 if/else 分支）
• 借助 ESLint 规则（如 no-use-before-define）提前发现潜在问题

基本上就这些。理解提升不是为了记住特例，而是看清 JS 执行逻辑的底层节奏——它不改变代码顺序，但会影响“可访问性”。写清楚、声明靠前、选对关键字，问题自然少很多。

# javascript  # java  # js  # 作用域 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Firefox Developer Edition开发者版本入口  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  如何快速启动建站代理加盟业务？  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  Laravel API资源类怎么用_Laravel API Resource数据转换  如何用wdcp快速搭建高效网站？  昵图网官方站入口 昵图网素材图库官网入口  网站制作大概多少钱一个,做一个平台网站大概多少钱？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  如何为不同团队 ID 动态生成多个“认领值班”按钮  Linux后台任务运行方法_nohup与&使用技巧【技巧】  Laravel如何实现一对一模型关联？（Eloquent示例）  SQL查询语句优化的实用方法总结  JavaScript如何实现类型判断_typeof和instanceof有什么区别  Laravel如何使用模型观察者？（Observer代码示例）  如何基于PHP生成高效IDC网络公司建站源码？  Laravel Fortify是什么，和Jetstream有什么关系  如何用已有域名快速搭建网站？  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  Laravel如何实现API版本控制_Laravel版本化API设计方案  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何在建站之星绑定自定义域名？  韩国服务器如何优化跨境访问实现高效连接？  移动端脚本框架Hammer.js  lovemo网页版地址 lovemo官网手机登录  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Java遍历集合的三种方式  三星网站视频制作教程下载,三星w23网页如何全屏？  长沙做网站要多少钱,长沙国安网络怎么样？  如何快速搭建自助建站会员专属系统？  微信小程序 canvas开发实例及注意事项  Laravel如何使用Sanctum进行API认证？（SPA实战）  英语简历制作免费网站推荐,如何将简历翻译成英文？  如何选择PHP开源工具快速搭建网站？  大同网页,大同瑞慈医院官网？  Bootstrap整体框架之CSS12栅格系统  网站页面设计需要考虑到这些问题  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  网站制作软件有哪些,制图软件有哪些？  如何基于云服务器快速搭建个人网站？  怎么用AI帮你设计一套个性化的手机App图标？  如何在Tomcat中配置并部署网站项目？  香港网站服务器数量如何影响SEO优化效果？  公司网站制作价格怎么算,公司办个官网需要多少钱？