从js闭包谈到作用域、作用域链、执行上下文、内存管理-北京尧图网络

文章目录作用域函数作用域和全局作用域块级作用域和暂时性死区执行上下文和调用栈代码执行的两个阶段调用栈闭包内存管理内存泄漏场景举例浏览器垃圾回收如何避免内存泄漏如何利用闭包实现单例模式✍创作者：全栈弄潮儿🏡 个人主页：全栈弄潮儿的个人主页🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区📙 专栏地址，欢迎订阅：前端架构师之路闭包是 JavaScript 中最基本也是最重要的概念之一。可是闭包又绝对不是一个单一的概念：它涉及作用域、作用域链、执行上下文、内存管理等多重知识点。作用域作用域其实就是一套规则：这个规则用于确定在特定场景下如何查找变量。任何语言都有作用域的概念，同一种语言在演进过程中也会不断完善其作用域规则。比如，在 JavaScript 中，ES6 出现之前只有函数作用域和全局作用域之分。函数作用域和全局作用域大家应该非常熟悉函数作用域：function foo() { var a = 'bar' console.log(a) } foo()执行 foo 函数时，变量 a 在函数 foo 作用域内，函数体内可以正常访问，并输出 bar。而当：var b = 'bar' function foo() { console.log(b) } foo()执行这段代码时，foo 函数在自身函数作用域内并未查找到 b 变量，但是它会继续向外扩大查找范围，因此可以在全局作用域中找到变量 b，输出 bar。如果我们稍加改动：function bar() { var b = 'bar' } function foo() { console.log(b) } foo()执行这段代码时，foo 和 bar 分属于两个彼此独立的函数作用域，foo 函数无法访问 bar 函数中定义的变量 b，且其作用域链内（上层全局作用域中）也不存在相应的变量，因此报错：Uncaught ReferenceError: b is not defined。总结：在 JavaScript 执行一段函数时，遇见变量读取其值，这时候会“就近”先在函数内部找该变量的声明或者赋值情况。这里可能会涉及“变量声明方式”以及“变量提升”。如果在函数内无法找到该变量，就要跳出函数作用域，到更上层作用域中查找。这里的“更上层作用域”可能也是一个函数作用域，例如：function bar() { var b = 'bar' function foo() { console.log(b) } foo() } bar()在 foo 函数执行时，对于变量 b 的声明或读值情况是在其上层函数 bar 作用域中获取的。同时“更上层作用域”也可以顺着作用域范围向外扩散，一直找到全局作用域：var b = 'bar' function bar() { function foo() { console.log(b) } foo() } bar()我们看到，变量作用域的查找是一个扩散过程，就像各个环节相扣的链条，逐次递进，这就是作用域链说法的由来。块级作用域和暂时性死区作用域概念不断演进，ES6 增加了 let 和 const 声明变量的块级作用域，使得 JavaScript 中作用域范围更加丰富。块级作用域，顾名思义，作用域范围限制在代码块中，这个概念在其他语言里也普遍存在。当然这些新特性的添加，也增加了一定的复杂度，带来了新的概念，比如暂时性死区。暂时性死区，还需要从“变量提升”说起，参看以下代码：function foo() { console.log(bar) var bar = 3 } foo()会输出：undefined，原因是变量 bar 在函数内进行了提升。相当于：function foo() { var bar console.log(bar) bar = 3 } foo()但在使用 let 声明时：function foo() { console.log(bar) let bar = 3 } foo()会报错：Uncaught ReferenceError: bar is not defined。我们知道使用 let 或 const 声明变量，会针对这个变量形成一个封闭的块级作用域，在这个块级作用域当中，如果在声明变量前访问该变量，就会报referenceError 错误；如果在声明变量后访问，则可以正常获取变量值：

从js闭包谈到作用域、作用域链、执行上下文、内存管理

相关推荐

React 现代化 Web 应用开发：本地环境怎样一次跑通

【单片机毕业设计推荐】基于 STM32 单片机的智能饮水设备控制系统设计与实现，基于 STM32 与 ESP‑01S 的物联网饮水监控系统设计（012106）

终极指南：如何使用 projectM 开源音乐可视化库打造震撼视觉效果

更多资讯

计算机组成原理入门：从冯诺依曼结构到CPU与存储层次

SpringBoot+Vue+MyBatis+MySQL企业级后台管理系统实战：从数据库设计到权限控制

页眉页脚与精准分页：dompdf.js 浏览器 PDF 生成 pageConfig 完整实战教程

voxtral.c 输入模式全解：WAV 文件、ffmpeg 管道与麦克风 3 种用法完整清单

FireRedTTS3音色设计（Voice Design）完全教程：一句话描述生成全新声音，无需参考音频

YOLO目标检测实战：变压器漏油数据集VOC转YOLO与训练全流程

今日更新

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？