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