JavaScript 的静态做用域链与“动态”闭包链

ssh 封的东半球最本质的闭包文章 [吃瓜]。

读完本文会解答你如下疑问：

• 静态做用域链和动态做用域链的区别
• 为何会有闭包
• 闭包何时建立的
• [[scopes]] 属性是什么
• 闭包保存什么内容
• 闭包存储在哪
• 为何 eval 性能很差
• eval 什么状况下会建立闭包

正文

在 JavaScript 里面，函数、块、模块均可以造成做用域（一个存放变量的独立空间），他们之间能够相互嵌套，做用域之间会造成引用关系，这条链叫作做用域链。

做用域链具体是什么样呢？

静态做用域链

好比这样一段代码

function func() {
    const guang = 'guang';
    function func2() {
      const ssh = 'ssh';
      {
        function func3 () {
          const suzhe = 'suzhe';
        }
      }
    }
  }

复制代码

其中，有 guang、ssh、suzhe 3个变量，有 func、func二、func3 3个函数，还有一个块，他们之间的做用域链能够用babel查看一下。

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const code = ` function func() { const guang = 'guang'; function func2() { const ssh = 'ssh'; { function func3 () { const suzhe = 'suzhe'; } } } } `;

const ast = parser.parse(code);

traverse(ast, {
  FunctionDeclaration (path) {
    if (path.get('id.name').node === 'func3') {
      console.log(path.scope.dump());
    }
  }
})
复制代码

结果是

用图可视化一下就是这样的

函数和块的做用域内的变量声明会在做用域 （scope） 内建立一个绑定（变量名绑定到具体的值，也就是 binding），而后其他地方能够引用 （refer） 这个 binding，这样就是静态做用域链的变量访问顺序。

为何叫“静态”呢？

由于这样的嵌套关系是分析代码就能够得出的，不须要运行，按照这种顺序访问变量的链就是静态做用域链，这种链的好处是能够直观的知道变量之间的引用关系。

相对的，还有动态做用域链，也就是做用域的引用关系与嵌套关系无关，与执行顺序有关，会在执行的时候动态建立不一样函数、块的做用域的引用关系。缺点就是不直观，无法静态分析。

静态做用域链是能够作静态分析的，好比咱们刚刚用 babel 分析的 scope 链就是。因此绝大多数编程语言都是做用域链设计都是选择静态的顺序。

可是，JavaScript 除了静态做用域链外，还有一个特色就是函数能够做为返回值。好比

function func () {
  const a = 1;
  return function () {
    console.log(a);
  }
}
const f2 = func();
复制代码

这就致使了一个问题，原本按照顺序建立调用一层层函数，按顺序建立和销毁做用域挺好的，可是若是内层函数返回了或者经过别的暴露出去了，那么外层函数销毁，内层函数却没有销毁，这时候怎么处理做用域，父做用域销不销毁？ （好比这里的 func 调用结束要不要销毁做用域）

不按顺序的函数调用与闭包

好比把上面的代码作下改造，返回内部函数，而后在外面调用：

function func() {
  const guang = 'guang';
  function func2() {
    const ssh = 'ssh';
    function func3 () {
      const suzhe = 'suzhe';
    }
    return func3;
  }
  return func2;
}

const func2 = func();
复制代码

当调用 func2 的时候 func1 已经执行完了，这时候销不销毁 ？因而 JavaScript 就设计了闭包的机制。

闭包怎么设计？

先不看答案，考虑一下咱们解决这个静态做用域链中的父做用域先于子做用域销毁怎么解决。

首先，父做用域要不要销毁？ 是否是父做用域不销毁就好了？

不行的，父做用域中有不少东西与子函数无关，为啥由于子函数没结束就一直常驻内存。这样确定有性能问题，因此仍是要销毁。 可是销毁了父做用域不能影响子函数，因此要再建立个对象，要把子函数内引用（refer）的父做用域的变量打包里来，给子函数打包带走。

怎么让子函数打包带走？

设计个独特的属性，好比 [[Scopes]] ，用这个来放函数打包带走的用到的环境。而且这个属性得是一个栈，由于函数有子函数、子函数可能还有子函数，每次打包都要放在这里一个包，因此就要设计成一个栈结构，就像饭盒有多层同样。

咱们所考虑的这个解决方案：销毁父做用域后，把用到的变量包起来，打包给子函数，放到一个属性上。这就是闭包的机制。

咱们来试验一下闭包的特性：

这个 func3 需不须要打包一些东西？ 会不会有闭包？

其实仍是有闭包的，闭包最少会包含全局做用域。

可是为啥 guang、ssh、suzhe 都没有 ？ suzhe是由于不是外部的，只有外部变量的时候才会生成，好比咱们改动下代码，打印下这 3 个变量。

再次查看 [[Scopes]] （打包带走的闭包环境）：

这时候就有俩闭包了，为何呢？ suzhe 哪去了？

首先，咱们须要打包的只是环境内没有的，也就是闭包只保存外部引用。而后是在建立函数的时候保存到函数属性上的，建立的函数返回的时候会打包给函数，可是 JS 引擎怎么知道它要用到哪些外部引用呢，须要作 AST 扫描，不少 JS 引擎会作 Lazy Parsing，这时候去 parse 函数，正好也能知道它用到了哪些外部引用，而后把这些外部用打包成 Closure 闭包，加到 [[scopes]] 中。

因此，闭包是返回函数的时候扫描函数内的标识符引用，把用到的本做用域的变量打成 Closure 包，放到 [[Scopes]] 里。

因此上面的函数会在 func3 返回的时候扫描函数内的标识符，把 guang、ssh 扫描出来了，就顺着做用域链条查找这俩变量，过滤出来打包成两个 Closure（由于属于两个做用域，因此生成两个 Closure），再加上最外层 Global，设置给函数 func3 的 [[scopes]] 属性，让它打包带走。

调用 func3 的时候，JS 引擎 会取出 [[Scopes]] 中的打包的 Closure + Global 链，设置成新的做用域链， 这就是函数用到的全部外部环境了，有了外部环境，天然就能够运行了。

这里思考一个问题： 调试代码的时候为何遇到过某个变量明明在做用域内能访问到，但就是没有相关信息呢？

这个 traverse，明明能访问到的，为啥就是不显示信息呢？是 debugger 作的太烂了么？

不是的，若是你不知道缘由，那是由于你还不理解闭包，由于这个 FunctionDeclaration 的函数是一个回调函数，明显是在另外一个函数内调用的，就须要在建立的时候打包带走这个环境内的东西，根据只打包必要的环境的原则（不浪费内存），traverse 没有被引用（refer），天然就不打包了。并非 debugger 有 bug 了。

因此咱们只要访问一下，就能在调试的时候访问到了。

是否是忽然知道为啥调试的时候不能看一些变量的信息了，能解释清楚这个现象，就算理解闭包了。

eval

再来思考一个问题： 闭包须要扫描函数内的标识符，作静态分析，那 eval 怎么办，他有可能内容是从网络记载的，从磁盘读取的等等，内容是动态的。用静态去分析动态是不可能没 bug 的。怎么办？

没错，eval 确实无法分析外部引用，也就无法打包闭包，这种就特殊处理一下，打包整个做用域就行了。

验证一下：

这个就像上面所说的，会把外部引用的打包成闭包

这个就是 eval 的实现，由于无法静态分析动态内容因此所有打包成闭包了，原本闭包就是为了避免保存所有的做用域链的内容，结果 eval 致使所有保存了，因此尽可能不要用 eval。会致使闭包保存内容过多。

可是 JS 引擎只处理了直接调用，也就是说直接调用 eval 才会打包整个做用域，若是不直接调用 eval，就无法分析引用，也就无法造成闭包了。

这种特殊状况有的时候还能用来完成一些黑魔法，好比利用不直接调用 eval 不会生成闭包，会在全局上下文执行的特性。

给闭包下个定义

用咱们刚刚的试验来给闭包下个定义：

闭包是在函数建立的时候，让函数打包带走的根据函数内的外部引用来过滤做用域链剩下的链。它是在函数建立的时候生成的做用域链的子集，是打包的外部环境。evel 由于无法分析内容，因此直接调用会把整个做用域打包（因此尽可能不要用 eval，容易在闭包保存过多的无用变量），而不直接调用则没有闭包。

过滤规则：

1. 全局做用域不会被过滤掉，必定包含。因此在何处调用函数都能访问到。

2. 其他做用域会根据是否内部有变量被当前函数所引用而过滤掉一些。不是每一个返回的子函数都会生成闭包。

3. 被引用的做用域也会过滤掉没有被引用的 binding （变量声明）。只把用到的变量打个包。

闭包的缺点

JavaScript 是静态做用域的设计，闭包是为了解决子函数晚于父函数销毁的问题，咱们会在父函数销毁时，把子函数引用到的变量打成 Closure 包放到函数的 [[Scopes]] 上，让它计算父函数销毁了也随时随地能访问外部环境。

这样设计确实解决了问题，可是有没有什么缺点呢？

其实问题就在于这个 [[Scopes]] 属性上

咱们知道 JavaScript 引擎会把内存分为函数调用栈、全局做用域和堆，其中堆用于放一些动态的对象，调用栈每个栈帧放一个函数的执行上下文，里面有一个 local 变量环境用于放内部声明的一些变量，若是是对象，会在堆上分配空间，而后把引用保存在栈帧的 local 环境中。全局做用域也是同样，只不过通常用于放静态的一些东西，有时候也叫静态域。

每一个栈帧的执行上下文包含函数执行须要访问的全部环境，包括 local 环境、做用域链、this等。

那么若是子函数返回了会发生什么呢？

首先父函数的栈帧会销毁，子函数这个时候其实尚未被调用，因此仍是一个堆中的对象，没有对应的栈帧，这时候父函数把做用域链过滤出须要用到的，造成闭包链，设置到子函数的 [[Scopes]] 属性上。

父函数销毁，栈帧对应的内存立刻释放，用到的 ssh Obj 会被 gc 回收，而返回的函数会把做用域链过滤出用到的引用造成闭包链放在堆中。 这就致使了一个隐患： 若是一个很大的对象被函数引用，原本函数调用结束就能销毁，可是如今引用却被经过闭包保存到了堆里，并且还一直用不到，那这块堆内存就一直无法使用，严重到必定程度就算是内存泄漏了。因此闭包不要乱用，少打包一点东西到堆内存。

总结

咱们从静态做用域开始聊起，明确了什么是做用域，经过 babel 静态分析了一下做用域，了解了下静态和动态做用域，而后引入了子函数先于父函数销毁的问题，思考了下方案，而后引入了闭包的概念，分析下闭包生成的流程，保存的位置。咱们还用闭包的特性分析了下为何有时候调试的时候查看不了变量信息，以后分析了下 eval 为何无法精确生成闭包，何时所有打包做用域、何时不生成闭包， eval 为何会致使内存占用过多。以后分析了下带有闭包的函数在内存中的特色，解释了下为啥可能会内存泄漏。

闭包是在返回一个函数的时候，为了把环境保存下载，建立的一个快照，对做用域链作了tree shking，只留下必要的闭包链，保存在堆里，做为对象的 [[scopes]] 属性，让函数无论走到哪，随时随地可访问用到的外部环境。在执行这个函数的时候，会利用这个“快照”，恢复做用域链。

由于还没执行函数，因此要静态分析标识符引用。静态分析动态这件事情被无数个框架证实作不了，因此返回的函数有eval 只能所有打包或者不生成闭包。相似webpack 的动态import无法分析同样。