news 2026/8/10 22:45:53

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

作者头像

张小明

前端开发工程师

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

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

KernelSU WebUI终极指南:让Android模块管理像打开网页一样简单

KernelSU WebUI终极指南:让Android模块管理像打开网页一样简单 【免费下载链接】KernelSU A Kernel based root solution for Android 项目地址: https://gitcode.com/GitHub_Trending/ke/KernelSU 你是否曾因Android模块配置的复杂性而感到困惑?…

作者头像 李华
网站建设 2026/8/10 22:44:37

好“哪些资料能入库”

“ RAG 不是“资料存储系统”,而是企业认知筛选系统。 很多企业做 RAG,第一步就走偏了。 不是模型没选对,也不是向量库不够强,而是企业一开始默认了一个错误前提: 只要资料够多,AI 就能把知识库做出来。…

作者头像 李华
网站建设 2026/8/10 22:43:53

GSE:魔兽世界终极宏编辑器完整指南 - 告别繁琐按键操作

GSE:魔兽世界终极宏编辑器完整指南 - 告别繁琐按键操作 【免费下载链接】GSE-Advanced-Macro-Compiler GSE is an alternative advanced macro editor and engine for World of Warcraft. 项目地址: https://gitcode.com/gh_mirrors/gs/GSE-Advanced-Macro-Compi…

作者头像 李华
网站建设 2026/8/10 22:40:59

notify开发实战:如何为新平台贡献适配器?

notify开发实战:如何为新平台贡献适配器? 【免费下载链接】notify Push notification SDK(AnPush、Bark、Chanify、DingTalk、Discord、Gitter、GoogleChat、IGot、Lark、Mattermost、MicrosoftTeams、NowPush、Ntfy、Push、Pushback、PushBullet、PushD…

作者头像 李华