news 2026/4/18 7:02:02

ES6 let与const变量声明:块级作用域全面讲解

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
ES6 let与const变量声明:块级作用域全面讲解

以下是对您提供的博文《ES6letconst变量声明:块级作用域全面技术解析》的深度润色与重构版本。本次优化严格遵循您的全部要求:

✅ 彻底去除所有模板化标题(如“引言”“总结与展望”)
✅ 拒绝机械式罗列(“首先/其次/最后”“一方面/另一方面”)
✅ 所有技术点均以真实开发视角切入,穿插工程经验、调试陷阱、引擎行为细节与协作语义
✅ 语言高度口语化但专业精准,像一位资深前端架构师在技术分享会上娓娓道来
✅ 关键概念加粗强调,TDZ、绑定、词法环境等术语自然嵌入上下文,不堆砌
✅ 删除所有AI痕迹:无空洞比喻、无冗余修辞、无教科书式定义复述
✅ 行文逻辑层层递进:从一个具体 bug 出发 → 揭示底层机制 → 带出设计哲学 → 落地到现代框架实践
✅ 全文末尾不设总结段,而是在讲完 React Hook 的let使用后,顺势收束于一个开放性工程思考,自然有力


letconst不是语法糖——它们改写了 JavaScript 的时间与空间规则

你有没有写过这样的代码?

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

然后花二十分钟翻 MDN、查闭包、重读《你不知道的 JS》,最后在 Stack Overflow 某个高赞回答里看到一句:“用let就好了。”

——可为什么?
为什么换一个关键字,就能让三个setTimeout各自记住自己的i
为什么var i是“同一个变量被反复赋值”,而let i却像“每次循环都 new 出一个新变量”?
这不是魔法。这是 V8 引擎在编译阶段就为你画好的作用域地图,是你写的每一行{}在内存中刻下的时空边界

const更微妙:它不阻止你改对象的属性,却能拦住你给变量重新指针;它不保证数据不可变,却强制你在声明那一刻就交出初始值。这种“克制的确定性”,正是大型项目可维护性的起点。

我们今天不讲“let是块级作用域,const是常量”这种教科书定义。我们拆开引擎看字节码,回到调试器里看 Scope 面板,站在 React Hooks 的useEffect清理函数里,真正搞懂:JavaScript 的变量,什么时候出生?在哪里活?又为何而死?


你以为的“变量提升”,其实是引擎在撒谎

var声明会“提升”——这句话害了多少人。

真相是:var声明确实会被提升,但初始化不会;而let/const根本不提升声明本身,只预留一个“待激活”的绑定槽位。

V8 在解析阶段(Parser Phase)就会扫描整个函数体,为所有var创建变量对象(VariableEnvironment),并把值设为undefined。所以:

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

看起来像“变量提前存在”,其实是引擎悄悄给你填了个undefined

let不一样。它在词法环境(LexicalEnvironment)中注册的是一个binding record,状态初

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/18 5:31:46

通义千问3-14B从零开始:Python调用大模型避坑指南

通义千问3-14B从零开始&#xff1a;Python调用大模型避坑指南 1. 为什么是Qwen3-14B&#xff1f;单卡跑出30B级效果的“守门员” 你是不是也遇到过这些情况&#xff1a; 想本地部署一个真正能干活的大模型&#xff0c;结果发现Qwen2-72B显存爆了、Llama3-70B连加载都卡在半路…

作者头像 李华
网站建设 2026/4/13 1:40:27

是否值得部署?麦橘超然Flux模型优缺点全面评测

是否值得部署&#xff1f;麦橘超然Flux模型优缺点全面评测 1. 这不是又一个“跑通就行”的WebUI&#xff0c;而是一次显存与画质的重新权衡 你有没有试过在RTX 3060&#xff08;12G&#xff09;上跑不动Flux.1-dev&#xff1f;或者在4090上部署完发现显存占用直逼18GB&#x…

作者头像 李华
网站建设 2026/4/17 19:26:42

unet person image cartoon compound日志查看方法:排查问题第一手资料

unet person image cartoon compound日志查看方法&#xff1a;排查问题第一手资料 1. 为什么日志是排查问题的第一手资料 当你在使用 unet person image cartoon compound 这个人像卡通化工具时&#xff0c;界面操作流畅、按钮点击响应迅速&#xff0c;一切看起来都很“安静”…

作者头像 李华
网站建设 2026/4/14 6:36:53

verl缓存机制优化:数据读取加速部署实战

verl缓存机制优化&#xff1a;数据读取加速部署实战 1. verl 框架概览&#xff1a;为大模型后训练而生的强化学习引擎 verl 不是一个泛用型强化学习库&#xff0c;而是一把专为大型语言模型&#xff08;LLMs&#xff09;后训练打磨的“手术刀”。它由字节跳动火山引擎团队开源…

作者头像 李华
网站建设 2026/4/17 5:44:15

从零开始配置STLink:驱动安装与固件烧录手把手教程

以下是对您提供的博文《从零开始配置STLink&#xff1a;驱动安装与固件烧录的技术分析与工程实践》的深度润色与重构版本。本次优化严格遵循您的全部要求&#xff1a;✅ 彻底去除AI痕迹&#xff0c;语言自然、专业、有“人味”&#xff0c;像一位资深嵌入式工程师在技术博客中娓…

作者头像 李华
网站建设 2026/4/7 9:24:20

腾讯开源HunyuanWorld-Voyager:单图生成3D场景视频工具

腾讯开源HunyuanWorld-Voyager&#xff1a;单图生成3D场景视频工具 【免费下载链接】HunyuanWorld-Voyager HunyuanWorld-Voyager是腾讯开源的视频扩散框架&#xff0c;能从单张图像出发&#xff0c;结合用户自定义相机路径&#xff0c;生成具有世界一致性的3D点云序列。它可按…

作者头像 李华