在前端开发的面试或者日常工作中，作用域链和闭包这两个概念就像是两座大山，横亘在每一位初级开发者通往资深工程师的道路上。说实话，hen多人刚开始接触这两个概念时脑子里简直是一团浆糊。为什么函数外面Neng访问不到里面的变量？为什么闭包Neng记住以前的东西？甚至还有传言说“闭包会导致内存泄漏，千万别用”，搞得人心惶惶。

今天咱们就撇开那些晦涩难懂的教科书式定义，用一种geng接地气、geng有人情味的方式，把这两个老伙计彻底扒个干净。相信我，一旦你搞懂了它们背后的逻辑，你会发现JavaScript的设计其实充满了某种独特的“哲学美感”。

一、 作用域：变量的“地盘”意识

在聊“链”之前，咱们得先明白什么是“作用域”。你Ke以把它想象成是一个气泡，或者是一个有围墙的花园。

在JavaScript这个大家庭里变量并不是哪里douNeng随便访问的。每个变量dou有自己的“势力范围”。这就好比你在自己家里Ke以穿着睡衣到处跑，但是你不Neng穿着睡衣跑到大街上去撒野，对吧？这就是Zui基本的作用域规则。

通常情况下咱们把作用域分为两大类：

全局作用域这就像是城市的广场，任何人douKe以在这里活动，在这里定义的变量，大家douNengkan得到，用得着。

函数作用域这就像是私人的密室。只有在这个房间里的人才Nengkan到里面的摆设。外面的人想kan？没门。

这里有一个hen有趣的现象，也是JS的一大特色：外部作用域无法访问内部作用域的变量，但内部作用域Ke以访问外部作用域的变量。

这就好比孩子Neng继承父母的东西，但父母不Neng随便翻孩子的书包。这种单向的访问机制，正是我们接下来要讲的“链”的基础。

二、 作用域链：一级一级的“寻亲”之旅

既然内部Nengkan外部，那Ru果函数套了好几层，像洋葱一样，该怎么找变量呢？这就引出了咱们的主角之一——作用域链。

想象一下你在代码的Zui深处写了一个变量 `x`。当JS引擎想要读取这个 `x` 的时候，它并不是漫无目的地乱找。它会遵循一套严格的“家谱”来查询。这套家谱，就是作用域链。

1. 它是如何工作的？

当一个函数被创建的时候，JavaScript的引擎会悄悄地给这个函数添加一个内部属性，名字叫 `]`。这个属性里存的，就是该函数诞生时所Neng接触到的所有变量对象的集合。

当函数真正开始执行时一个执行上下文就被创建了。这时候，一个专门用于查找变量的作用域链也就随之诞生了。它本质上是一个指向变量对象的指针列表。

这个过程有点像是在爬楼梯：

引擎会在当前函数的“地盘”里找，kankan有没有你要的变量。

Ru果没找到，它不会放弃，而是会顺着 `]` 这根绳子，往上一层去找。

Ru果还没找到，继续往上爬，直到找到全局作用域为止。

Ru果到了全局还没找到，那引擎就会两手一摊，扔给你一个 ReferenceError。

咱们来kan一段代码，感受一下这种层层递进的关系：

var g = 10; // 全局变量
function A {
  var a = 20; // A的私有变量
  function B {
    var b = 30; // B的私有变量
    var C = function  {
      var c = 40; // C的私有变量
      // 注意kan这里CNeng访问到谁？
      console.log; 
    };
    C;
  }
  B;
}
A;

在这个例子中，函数 `C` 想要打印 `c, b, a, g`。它自己有 `c`，所以直接拿。但是它没有 `b`，怎么办？它就顺着作用域链往上爬，找到了 `B` 的活动对象，拿到了 `b`。同理，`a` 是在 `A` 里找到的，`g` 是在全局里找到的。

这种由内向外、一级一级向上寻找的机制，就是所谓的链式查找。它保证了变量访问的有序性，也避免了不同层级变量之间的冲突。

2. 变量提升与函数提升

在讲作用域链的时候，咱们不得不提一个让人又爱又恨的机制——变量提升。

你有没有遇到过这种情况：你在变量声明之前就用了它，结果居然没报错？这就是提升在作怪。在JS引擎眼里变量和函数的声明会在代码执行前被“搬运”到当前作用域的顶部。

不过要注意，函数的优先级通常比变量要高。Ru果变量名和函数名冲突了函数声明往往会把变量声明给“盖”过去。理解这一点，对于排查那些莫名其妙的 `

三、 闭包：打破规则的“时空胶囊”

说完了作用域链，咱们终于Ke以聊聊那个让人闻风丧胆的闭包了。

按照常规逻辑，一个函数执行完了它的局部变量就应该被销毁，内存被释放，就像人走茶凉一样。这hen合理，对吧？但是闭包偏偏要打破这个规则。

1. 什么是闭包？

简单来说当一个函数Neng够记住并访问它所在的词法作用域，即使该函数在其原始作用域之外被执行，这就形成了闭包。

听着有点绕？咱们换个说法。想象一下你在函数 `A` 里面定义了一个变量 `n`，然后你在 `A` 里面又返回了一个函数 `B`，而 `B` 恰好用到了 `n`。当你把 `B` 拿到外面去执行时`A` 虽然Yi经执行结束了但 `B` 依然Neng访问到 `A` 里的 `n`。这时候，`B` 就是一个闭包。

这就好比 `A` 虽然倒闭了但它给 `B` 留了一个保险箱，钥匙在 `B` 手里`A` 里的东西一直dou在没被清理掉。

2. 经典案例：计数器

咱们来kan一个Zui经典的例子——计数器。这几乎是所有教程必讲的代码，但咱们今天要讲得透彻一点。

你kan，当我们调用 `A` 时它返回了一个匿名函数。这个匿名函数里用到了 `A` 的局部变量 `count`。神奇的事情发生了：

通常情况下`A` 执行完，它的 `count` 应该没了。但是因为返回的那个匿名函数还在引用着 `count`，所以JS引擎的垃圾回收机制不敢把 `count` 给回收了。

这就形成了一个“私有化”的效果。我们无法直接从外部修改 `count`，只Neng通过 `test` 函数来操作它。这就是闭包Zui强大的地方：数据封装和状态保持。

3. 闭包背后的原理

从原理上讲，虽然 `A` 的执行上下文Yi经从栈上弹出了但是 `A` 的变量对象并没有被当作垃圾清理掉。为什么？因为那个被返回的匿名函数的 `]` 属性里依然保留着对 `A` 变量对象的引用。

只要这个引用还在这块内存空间就会一直存在。这就是为什么闭包Neng“记住”过去的状态。

四、 闭包的副作用：内存泄漏的真相

既然闭包这么好用，为什么还有人把它视为洪水猛兽？这就不得不提内存泄漏的问题了。

咱们前面说了闭包会导致原本该释放的作用域链不被释放。这就像是你借了图书馆的书，一直不还，图书馆就不Neng把这本书借给别人，甚至不Neng下架。书还在那里占着地方。

所谓的“内存泄漏”，在这里并不是说内存真的“漏”掉了不见了。而是指内存空间被无效地占用了。该释放的没释放，可用的内存空间就变少了。Ru果页面里充斥着大量这种无法释放的闭包，浏览器就会变得卡顿，甚至崩溃。

如何避免？

别慌，闭包本身没错，错的是我们怎么用它。

手动置空Ru果你确定某个闭包以后再也用不到了Ke以把它赋值为 `null`。比如 `test = null;`。这样切断了引用，垃圾回收器就Neng放心地把那块内存回收了。

避免滥用不是所有地方dou需要闭包。Ru果只是简单的逻辑，没必要为了秀技术而强行使用闭包。

另外现在的浏览器其实Yi经Zuo了hen多优化。它们会智Neng地分析作用域链，Ru果发现某些变量在闭包里虽然定义了但根本没用到，引擎可Neng会在 `]` 中只保留需要用到的数据，把没用的剔除掉。这叫“优化”，但作为开发者，咱们心里还是得有杆秤，不Neng完全依赖浏览器的“施舍”。

五、 ：拥抱闭包，理解链式

回过头来kan，作用域链是JavaScript这座大厦的钢筋骨架，它规定了变量和函数的归属关系，确立了秩序；而闭包则是大厦里那些精巧的暗格，它打破了常规的生命周期限制，赋予了函数“记忆”的Neng力。

理解它们，不仅仅是应付面试，geng是为了写出geng优雅、geng健壮的代码。当你Neng熟练地运用闭包来封装模块、保护私有状态时你才算真正跨过了JavaScript中级开发的门槛。

所以下次再写代码的时候，不妨多想一步：这个函数执行完，变量还在吗？这里用闭包会不会造成内存压力？当你开始思考这些问题时你就Yi经不再是那个只会复制粘贴代码的“码农”了。

希望这篇文章Neng帮你彻底理清这两个概念。Ru果觉得还有点晕，不妨打开控制台，把上面的代码敲一遍，打断点，一步步kankan作用域链是怎么变化的。实践出真知，这永远是不变的真理。

---