浅谈闭包和异步

把复杂的知识简单化------------------------------------------westlife

引言-----你知道嫦娥为何那么善变吗？？？ 由于chang er啊，哈哈哈哈！

纵观js，有三座大山，这三座大山分别为--- 做用域/闭包 ， 原型,  异步和单线程.难倒了一代又一代前端小白，小白发挥着愚公移山的精神，挠碎多少头发。伤害了多少神经元。。。。。

今天我来讲下我所理解的闭包。

首先闭包产生地条件：有两个。

1.函数嵌套函数

2.变量在外面那个函数声明，在里面呢个函数调用。

给你们看一个例子

function foo(){
    var a  = 10;
    return function(){
       return ++a
    }
}
var c = foo();
console.log(c());
console.log(c());复制代码

这就是一个简单的闭包，在浏览器调试器下能够看到分别打印了 11 12；

(ps：谢谢热心网友的矫正，错误已经改回来)

那么闭包有什么做用呢？

做用1：保存即将要被销毁的数据

举个小栗子：

你们记得作tab选项卡是怎么作的吗？恩，对，应该不少人都会作，无非就是找按钮的下标，找内容区域的下标，一一对应，for循环遍历按钮，点击按钮时，有事件了，因此产生了异步，for循环的i值不能对应到点击事件的i值，这里咱们取巧了，给每一个按钮都添加了下标，对应下标的内容区域显示出来，但是，存在一个问题，咱们要在按钮组添加一个变量为index，若是咱们不想要这个index，咱们能不能用其余方法实现呢，答案是咱们能，能够用es6的块级做用域来实现，固然咱们也能够用闭包来实现

如图：一般实现tab选项卡的方法

利用闭包来实现

(function(){
    var wrap = document.querySelector('#wrap');
    var pic = document.querySelector('#wrap');
    var aBtn = wrap.getElementsByTagName('li'); //获取全部li组
    var aPic = pic.getElementsByTagName('div'); //获取全部div组
    for(var i = 0;i<aBtn.length;i++){
       !function(n){
             aBtn[n].onclick = function(){
             aBtn[n].style.display = 'block'
            }
        }(i)
    }
}()复制代码

是否是很神奇，就用了一个变量i。原本变量i   for循环了就变成9（由于事件会产生异步）；嘿嘿嘿嘿....利用闭包，巧妙了实现了i值得再次利用

做用2:保密

demo：写一段js代码，实现模拟汽车驾驶证科目一考试，作完一题，显示出答案的效果

想必你们思路是有的，把答案全放进一个数组里，数组的长度和题目的长度同样，数组了存放正确答案，当用户点击按钮时，在旁边显示的出此时此刻这个题目的答案，可是这样数据不安全啊，稍微懂点代码的人在控制台输出答案；怎么作到数据的保密性呢，--闭包

!function(){
var aBtn = document.getElementsByClassName('btn');//获取全部按钮
var arr = ["A","B","C","A"...........]  //存放答案数

for(var i = 0;i<aBtn.length;i++){
   !function(n){
        aBtn[n].onclick = function(){
            console.log("正确答案是:"+arr[n])
        }
    }()
}复制代码

就这样写出来了。利用匿名函数/立执行函数，数据不外泄，保密妥妥的，

其实说白了，闭包只是一种垃圾回收机制，有点像咱们电脑中的回收站同样。变量声明要被销毁时，利用闭包能够收集即将被销毁的数据。

而后说下异步：上文也说起到了异步；咱们的js代码是单线程执行的，从上到下执行；可是异步时候出现时。异步的执行代码会让同步的执行代码有限经过；就比如红绿灯同样，等红灯过去了咱们才能经过，异步就是这样，等同步的代码执行完了才会经过，因此，同步老是优先于异步！

触发异步的条件

1. ajax
2. 事件
3. setTimeout() setInterval()

异步就将这么多，想听后续如何，请听下回分解！

                                                                  ___以上均为本人原创，若有纰漏，望能矫正。