浅谈闭包和异步

把复杂的知识简单化------------------------------------------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()

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

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