从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 错误 ;如果在声明变量后访问,则可以正常获取变量值:

相关新闻

Pock:重新定义MacBook Touch Bar的小部件管理器

Pock:重新定义MacBook Touch Bar的小部件管理器

Pock:重新定义MacBook Touch Bar的小部件管理器 【免费下载链接】pock Widgets manager for MacBook Touch Bar 项目地址: https://gitcode.com/gh_mirrors/po/pock Pock是一款专为MacBook Touch Bar设计的开源小部件管理器,它彻底改变了Touch Ba…

2026/8/10 22:45:18 阅读更多 →
漫画格式转换终极指南:如何用CBconvert轻松解决设备兼容问题

漫画格式转换终极指南:如何用CBconvert轻松解决设备兼容问题

漫画格式转换终极指南:如何用CBconvert轻松解决设备兼容问题 【免费下载链接】cbconvert CBconvert is a Comic Book converter 项目地址: https://gitcode.com/gh_mirrors/cb/cbconvert 还在为不同设备无法读取漫画文件而烦恼吗?您是否遇到过在电…

2026/8/10 22:45:18 阅读更多 →
Huihui-Qwythos-9B-Claude-Mythos-5-1M-abliterated-GGUF:终极无审查AI推理模型完整指南

Huihui-Qwythos-9B-Claude-Mythos-5-1M-abliterated-GGUF:终极无审查AI推理模型完整指南

Huihui-Qwythos-9B-Claude-Mythos-5-1M-abliterated-GGUF:终极无审查AI推理模型完整指南 【免费下载链接】Huihui-Qwythos-9B-Claude-Mythos-5-1M-abliterated-GGUF 项目地址: https://ai.gitcode.com/hf_mirrors/huihui-ai/Huihui-Qwythos-9B-Claude-Mythos-5-1…

2026/8/10 22:45:18 阅读更多 →

最新新闻

UE4SS导致《幻兽帕鲁》存档重置:原理剖析与系统修复指南

UE4SS导致《幻兽帕鲁》存档重置:原理剖析与系统修复指南

1. 项目概述:当UE4SS遇上帕鲁世界,一场数据保卫战 如果你是一个《幻兽帕鲁》的深度玩家,同时又热衷于使用UE4SS这类强大的游戏模组框架来解锁更多玩法,那么“角色存档重置”这个噩梦般的场景,你可能已经历或正在恐惧。…

2026/8/10 23:35:54 阅读更多 →
HarmonyOS数字排序游戏开发:教育应用实践与优化

HarmonyOS数字排序游戏开发:教育应用实践与优化

1. 项目概述:HarmonyOS数字排序游戏的设计初衷 作为一名在移动应用开发领域深耕多年的开发者,最近我注意到教育类应用在HarmonyOS生态中的需求正在快速增长。这个"万以内的数的认识:数字排序游戏"项目,正是针对小学低年…

2026/8/10 23:35:54 阅读更多 →
5分钟快速上手:ENet可靠UDP网络库跨平台开发终极指南

5分钟快速上手:ENet可靠UDP网络库跨平台开发终极指南

5分钟快速上手:ENet可靠UDP网络库跨平台开发终极指南 【免费下载链接】enet ENet reliable UDP networking library 项目地址: https://gitcode.com/gh_mirrors/en/enet ENet是一个轻量级、高性能的可靠UDP网络库,专为实时多人游戏和网络应用设计…

2026/8/10 23:35:54 阅读更多 →
计算机毕业设计之基于Spring Boot的废品回收管理系统设计与实现

计算机毕业设计之基于Spring Boot的废品回收管理系统设计与实现

当下社会,信息技术充斥社会各个领域,已融入人们生活的点滴,日常中人们管理信息、办理业务、购买商品等都可以网络线上进行,快速而又便利,特别是随着移动互联网时代的到来,更是让人们随时享受着网络给带来的…

2026/8/10 23:35:54 阅读更多 →
终极指南:如何使用Neural Amp Modeler插件获得专业吉他音色

终极指南:如何使用Neural Amp Modeler插件获得专业吉他音色

终极指南:如何使用Neural Amp Modeler插件获得专业吉他音色 【免费下载链接】NeuralAmpModelerPlugin Plugin for Neural Amp Modeler 项目地址: https://gitcode.com/GitHub_Trending/ne/NeuralAmpModelerPlugin Neural Amp Modeler插件是一款基于人工智能技…

2026/8/10 23:35:54 阅读更多 →
终极指南:Loop免费开源macOS窗口管理神器,一键告别桌面杂乱

终极指南:Loop免费开源macOS窗口管理神器,一键告别桌面杂乱

终极指南:Loop免费开源macOS窗口管理神器,一键告别桌面杂乱 【免费下载链接】Loop Window management made elegant. 项目地址: https://gitcode.com/GitHub_Trending/lo/Loop 你是否曾在多任务处理时,面对满屏交错的窗口感到无从下手…

2026/8/10 23:34:53 阅读更多 →

日新闻

GraphQL-CSS API全解析:useGqlCSS、GqlCSS组件与getStyles实用指南

GraphQL-CSS API全解析:useGqlCSS、GqlCSS组件与getStyles实用指南

GraphQL-CSS API全解析:useGqlCSS、GqlCSS组件与getStyles实用指南 【免费下载链接】graphql-css A blazing fast CSS-in-GQL™ library. 项目地址: https://gitcode.com/gh_mirrors/gr/graphql-css GraphQL-CSS是一个基于GraphQL的CSS-in-GQL™库&#xff0…

2026/8/10 0:00:02 阅读更多 →
告别语言障碍:KISS Translator 双语翻译插件终极指南

告别语言障碍:KISS Translator 双语翻译插件终极指南

告别语言障碍:KISS Translator 双语翻译插件终极指南 【免费下载链接】kiss-translator A simple, open source bilingual translation extension & Greasemonkey script (一个简约、开源的 双语对照翻译扩展 & 油猴脚本) 项目地址: https://gitcode.com/…

2026/8/10 0:00:02 阅读更多 →
BepInEx配置管理器:游戏插件配置的终极可视化解决方案

BepInEx配置管理器:游戏插件配置的终极可视化解决方案

BepInEx配置管理器:游戏插件配置的终极可视化解决方案 【免费下载链接】BepInEx.ConfigurationManager Plugin configuration manager for BepInEx 项目地址: https://gitcode.com/gh_mirrors/be/BepInEx.ConfigurationManager 你是否曾经因为游戏插件的复杂…

2026/8/10 0:00:02 阅读更多 →

周新闻

5分钟告别提取码焦虑:baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑:baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑:baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码(维护中 rm repo) 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/10 1:05:29 阅读更多 →
如何快速生成中国车牌图片:Python开源工具完整指南

如何快速生成中国车牌图片:Python开源工具完整指南

如何快速生成中国车牌图片:Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/10 1:05:29 阅读更多 →
收藏!小白程序员轻松入门大模型,从Harness工程开始实践

收藏!小白程序员轻松入门大模型,从Harness工程开始实践

文章强调学习大模型不应只关注模型本身,而应重视模型外的系统搭建,即Harness。提出AgentModelHarness的实用公式,详细介绍Harness的四个层次:持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/10 1:05:29 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/10 17:07:33 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/10 1:05:29 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/10 17:07:33 阅读更多 →