理解 JavaScript 闭包

作为 JS 初学者，第一次接触闭包的概念是因为写出了类似下面的代码：

给列表项循环添加事件处理程序。当你点击列表项时不会有任何反应。如何在初学就理解闭包？你需要接着读下去。

§ 什么是闭包

说闭包前，你还记得词法作用域吗？

执行上面的代码打印出 1。

bar 函数是 foo 函数的内部函数，JS 的词法作用域允许内部函数访问外部函数的变量。那我们可不可以在外部访问内部函数的变量呢？理论上不允许。

但是我们可以通过某种方式实现，即将内部函数返回。

内部函数允许访问其父函数的内部变量，那么将内部函数返回到出来，它依旧引用着其父函数的内部变量。

这里就产生了闭包。

简单来说，可以把闭包理解为函数返回函数。

上面的代码中，当 increase 函数执行，压入执行栈，执行完毕返回一个 add 函数的引用，所以 increase 函数内部的变量对象依旧保存在内存中，不会被销毁。

调用 addOne 函数，相当于执行内部函数 add，它可以访问其父函数的内部变量，从而修改变量 count。而调用 addOne 函数所在的环境为全局作用域，不是定义 add 函数时的函数作用域。

所以，我理解的闭包是一个函数，它在执行时与其定义时所处的词法作用域不一致，并且具有能够访问定义时词法作用域的能力。MDN 这样定义：闭包是函数和声明该函数的词法环境的组合。

§ 闭包的利与弊

◆ 利

第一，闭包可以在函数外部读取函数内部的变量。

上面这种模式称为模块模式。我们使用立即执行函数 IIFE 将代码私有化但是提供了可访问的接口，通过公共接口来访问函数私有的函数和变量。

第二，闭包将内部变量始终保存在内存中。

利用闭包将内部变量（参数）tag 保存在内存中，来封装自己的类型判断函数。

◆ 弊

第一，既然闭包会将内部变量一直保存在内存中，如果在程序中大量使用闭包，势必造成内存的泄漏。

在这个例子中，click 事件处理程序就是一个闭包（在这里是个匿名函数），它将引用着 button 变量；而 button 在这里本身依旧引用着这个匿名函数。从而产生循环引用，造成网页的性能问题，在 IE 中可能会内存泄漏。

解决办法就是手动解除引用。

第二，如果你将函数作为对象使用，将闭包作为它的方法，应该特别注意不要随意改动函数的私有属性。

§ 闭包的经典问题

◆ 循环

现在我们来解决一下文章开头出现的问题。

额外声明一个 makeHelpCallBack 的函数，将循环每次的上下文环境通过闭包保存起来。

◆ setTimeout

结果为 1 秒后，打印 5 个 5。

我们可以利用闭包保留词法作用域的特点，来修改代码达到目的。

结果为 1 秒后，依次打印 0 1 2 3 4。

§ 小结

闭包在 JS 中随处可见。

闭包是 JS 中的精华部分，理解它需要具备一定的作用域、执行栈的知识。理解它你将收获巨大，你会在 JS 学习的道路上走得更远。

原文：https://segmentfault.com/a/1190000017404391

最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。