动画：什么是闭包？

写在前边

正在学习初学前端小伙伴，会感受 HTML 和 CSS 太简单了，没什么挑战性。那是你没有学过 JS ，JS 中太多的概念初期学习的时候也是很懵逼的，好比 this、原型链、闭包等，便是重点，又是难点。可是你懂了以后会发现很简单，很好理解。

由于小鹿暑假去面试，每场面试基本都是必问的，不只要知道理论，还要问你在实际项目中的实践，这部份内容不少人经常在实战中忽略掉。

今天的内容，就是 JS 中的一个重点，也是面试的必考点，项目中也常用到，那就是有请咱们神圣的"闭包"出场。

你可能没据说过这个名词，也可能据说了可是不理解它，不知道怎么使用它，那我们从零和小鹿用动画把“闭包”的概念弄的明明白白。

思惟导图

一、什么是闭包？

学习一个陌生的概念，咱们首先要去明白是什么？也就是闭包是什么？要想彻底掌握闭包，必定要清楚函数做用域、内存回收机制、做用域继承。咱们就简单讲一下这几个概念。

1.1 函数做用域

做用域的概念，形象描述的话，能够认为它是一个封闭的空间，只容许在这个封闭的空间内进行一些操做，也将这个封闭空间称为私有做用域。在 JS 中，一个函数的执行就会在内存中建立一个私有做用域——封闭的空间。

好比在函数中定义一个变量，只能在函数这个私有做用域中使用（也就是封闭空间）。只要超出了这个做用域，就找不到该变量了。

并且函数执行完成后，这个私有做用域（封闭的空间）就会销毁。有一种状况它是不会销毁的，那就是“闭包”，后边会讲到。

1.2 内存回收机制

内存回收机制就是不在用到的内存，咱们系统就自动进行回收从而清理出空间供其余程序使用。那回收的规则是什么？

内部函数引用着外部的函数的变量，外部的函数尽管执行完毕，做用域也不会销毁。从而造成了一种不销毁的私有做用域。

某一变量或者对象被引用着，所以在回收的时候不会释放它，由于被引用表明着被使用，回收器不会对正在引用的变量或对象回收的。

1.3 做用域继承

所谓的做用域继承，就像是儿子能够继承父亲的财产同样。好比小鹿这里有一个大的盒子做为一个父级的做用域，而后在这个大的盒子里边放一个小的盒子，做为子做用域。咱们规定能够在小盒子中获取到大盒子中的东西，大盒子不能获取小盒子里的东西就称为做用域继承。

在 JS 中，道理是同样的，在一个函数里边咱们再声明一个函数，内部函数能够访问外部函数做用域的变量，而外部的函数不能获取到内部函数的做用域变量。

那好，上边的这几个概念理解了以后，什么是闭包对你来讲已经不是什么问题。

大白话说什么是闭包，那就是在一个函数里边再定义一个函数。这个内部函数一直保持有对外部函数中做用域的访问权限(小盒子一直能够有大盒子的访问权限)。

函数执行，造成一个私有的做用域，保护里边的私有变量不受外界的干扰，除了保护私有变量外，还能够存储一些内容，这样的模式叫作闭包。

动画实现：

二、闭包的做用是什么？

想必你对闭包仍是有点懵懵懂懂，不要紧，咱们再继续深刻了解。闭包主要的做用是什么呢？为何要使用闭包呢？

经过上边对闭包的解释，外部函数 return 内部函数，可是仍然仍是能够有访问外部函数的做用域，由于外部一直保持着引用。这就让咱们发现它的可用之处。

不是有块做用域不销毁吗？咱们能够用来保存一些内容，还能够用来保护一些私有的变量。咱们总结出闭包有两个做用，分别为保护和保存。

三、闭包的应用场景

既然咱们知道闭包的做用是保存和保护，那在实际项目中哪里用到了呢？

3.1 保护做用

团队开发时，每一个开发者把本身的代码放在一个私有的做用域中，防止相互之间的变量命名冲突；把须要提供给别人的方法，经过 return 或 window.xxx 的方式暴露在全局下。

jQuery 的源码中也是利用了这种保护机制。

3.2 保存做用

选项卡闭包的解决方案。咱们常常在网页中使用选项卡，可是它存在一个问题，那就是索引引起的问题，其实和下边的经典面试题问题相同。

四、经典的闭包面试题

循环绑定事件引起的索引什么问题？怎么解决这种问题？

此时运行程序，你会得出的结果都是 len 的数值。

为何会出现这种问题，咱们如何解决呢？

缘由很简单，全部的事件绑定都是异步的，当触发点击事件，执行方法的时候，循环早就结束了。

咱们在多说一点，什么是同步什么是异步？

同步：JS 中当前这个任务没有完成，下面的任务都不会执行，只有等当前完全完成，才会执行下面的任务。

异步：JS 中的当前任务没有完成，须要等一会在完成，此时咱们能够继续执行下面的任务。

解决方案：

当点击事件执行的时候，就会在私有做用域查找 i 的值，此时私有做用域没有 i ，就回去全局做用域查找，此时全局做用域的 i 已经被改变。因此说，要建立一个私有做用域的 i 。

方法一，闭包的方式。闭包终于排上用场了，用来保存私有的变量。

可是闭包解决又优势，也有缺点。优势就是经过建立私有做用域（闭包）方式解决，循环几回，就建立几个私有做用域（闭包），而后，每一个私有做用域都有一个私有变量 i ，存的值分别是循环的值。

缺点是生成多个不销毁的私有做用域（堆内存），对性能有必定的影响。

方法二，使用自定义属性。咱们给每一个对象添加一个索引属性就 OK 了。

终极解决方案，这是 ES6 中的知识，由于以前在 JS 中是没有块级做用域的概念的，到了 ES6 中就有了，Let 声明的变量就能够更好的解决上述问题。

---

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

文章+动画写了好几个小时，不妨点赞支持一下。嘻嘻，你不点赞说明你很自私，你怕那么好的文章让别人也看到。开个小小玩笑。

能够关注小鹿公众号：「小鹿动画学编程」，后台回复：“资源”。送你一份小鹿以前自学的资料和拉你进免费学习群哦！

做者Info：

【做者】：小鹿

【原创公众号】：小鹿动画学编程。

【简介】：和小鹿同窗一块儿用动画的方式从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈献给小伙伴。先定个小目标，原创 1000 篇的动画技术文章，和各位小伙伴共同努力一块儿学习！公众号回复 “资料” 送一从零自学资料大礼包！

【转载说明】：转载请说明出处，谢谢合做！~