news 2026/6/2 9:04:29

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/5/28 17:30:15

Qwen3-VL-4B:4bit量化版视觉推理神器来了!

Qwen3-VL-4B&#xff1a;4bit量化版视觉推理神器来了&#xff01; 【免费下载链接】Qwen3-VL-4B-Instruct-bnb-4bit 项目地址: https://ai.gitcode.com/hf_mirrors/unsloth/Qwen3-VL-4B-Instruct-bnb-4bit 导语&#xff1a;阿里云最新推出的Qwen3-VL-4B-Instruct-bnb-4…

作者头像 李华
网站建设 2026/5/31 2:38:45

Qwen3-Coder 30B:256K上下文,智能编码效率倍增

Qwen3-Coder 30B&#xff1a;256K上下文&#xff0c;智能编码效率倍增 【免费下载链接】Qwen3-Coder-30B-A3B-Instruct 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3-Coder-30B-A3B-Instruct 导语&#xff1a;阿里达摩院最新推出的Qwen3-Coder-30B-A3B-Ins…

作者头像 李华
网站建设 2026/5/28 22:47:43

KaniTTS:370M参数6语AI语音合成,2GB显存极速生成

KaniTTS&#xff1a;370M参数6语AI语音合成&#xff0c;2GB显存极速生成 【免费下载链接】kani-tts-370m 项目地址: https://ai.gitcode.com/hf_mirrors/nineninesix/kani-tts-370m 导语&#xff1a;KaniTTS凭借370M轻量化参数设计&#xff0c;实现6种语言实时语音合成…

作者头像 李华
网站建设 2026/5/30 15:07:15

1.3万亿token!FineWeb-Edu教育数据终极宝库

1.3万亿token&#xff01;FineWeb-Edu教育数据终极宝库 【免费下载链接】fineweb-edu 项目地址: https://ai.gitcode.com/hf_mirrors/HuggingFaceFW/fineweb-edu 大语言模型训练数据领域再添重磅资源——Hugging Face推出FineWeb-Edu数据集&#xff0c;这一专注于教育内…

作者头像 李华
网站建设 2026/5/31 2:00:39

11fps实时视频生成!Krea 14B大模型开启极速创作

11fps实时视频生成&#xff01;Krea 14B大模型开启极速创作 【免费下载链接】krea-realtime-video 项目地址: https://ai.gitcode.com/hf_mirrors/krea/krea-realtime-video 导语&#xff1a;AI视频生成技术迎来重要突破&#xff0c;Krea推出的14B参数实时视频模型&…

作者头像 李华
网站建设 2026/5/28 19:05:05

Llama3-8B供应链问答:物流管理AI助手实战

Llama3-8B供应链问答&#xff1a;物流管理AI助手实战 1. 为什么选Llama3-8B做供应链问答&#xff1f; 你有没有遇到过这些场景&#xff1a; 客服被反复问“我的货到哪了&#xff1f;”“预计什么时候签收&#xff1f;”——每天上百次&#xff0c;答案其实就那几类&#xff…

作者头像 李华