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