js闭包 与事件队列

针对闭包相信小伙伴们有很多不同的概念跟理解

何为闭包，从结构上来讲，闭包就是函数套函数，类似递归这种函数调用函数本身的也算是闭包

闭包的作用主要是获取函数内部的局部变量，这也是Javascript语言的特殊之处

JS 的闭包包含以下要点：

函数声明的时候，会生成一个独立的作用域 同一作用域的对象可以互相访问 作用域呈层级包含状态，形成作用域链，子作用域的对象可以访问父作用域的对象，反之不能；另外子作用域会使用最近的父作用域的对象

上代码理解闭包，通过实例会更容易理解

   function f1(){
   var n=999;  =>一定要加声明  不然变成全局变量了
   return function f2(){
    console.log(n); 
    }
   }
  f1()()// 999
复制代码

js中变量只有两种情况，局部变量与全局变量
这就是函数的作用域链 我把代码解构一下 方便大家理解

   function f1(){                                ---------------------------------------------

   var n=999;
                                                                                 此处都属于f1的作用域 也可以称之父作用域
            return function f2(){   -------------------------

                      console.log(n);                      这段就是子作用域

                        }-----------------------------------------
    
   }--------------------------------------------------------------------------------------

  f1()()// 999
复制代码

f1()的结果是返回f2 f2()函数执行 打印n 但是此时f2中并没有n 那么他就会往它的父作用域去找 ，好 此时找到了n 那么此时n为999

   var n=999; 
   function f1(){
   return function f2(){
    console.log(n); 
    }
   }
  f1()()// 999
复制代码

相同的， 如果f1里不存在n 那么就会再去上一级 也就是window中寻找n 那么此时n就是window中的n

   var n=999; 
   function f1(){
    var n=80;   
   return function f2(){
    console.log(n); 
    }
   }
  f1()()// 80
复制代码

此时 f1中也有了n 那么 根据前面说的 闭包的特点 子作用域会使用最近的父作用域的对象 他会取到最近的作用域的属性 此时n为80

   function f1(){
       
   return function f2(){
    console.log(n); 
    }
   }
   
  f1()()// undefined
  var n=80;
复制代码

注意，作用域只会向上寻找，不会向下，函数的声明位置是无所谓的，这根函数的预解析有关，函数的声明只跟调用有关，此时在函数向上寻找n的过程中没有发现n，其实已经发现了，n等于undefined此时，因为var 变量提升

通过这个例子，我想大家很容易理解上面特点的第三条

作用域呈层级包含状态，形成作用域链，子作用域的对象可以访问父作用域的对象，反之不能；另外子作用域会使用最近的父作用域的对象

那么我们也说过 闭包的作用主要是获取函数内部的局部变量 我们尝试来提取一下

function f1(){ 
   return function f2(){
          for(var i=0;i<10;i++){
             console.log(i)  //0，1,2,3,4,5,6,7,8,9
          } 
   }
}
f1()() 
复制代码

这样我们就可以将子函数的变量给提取出来了

我们都知道 for循环是异步进行的 如果我们在外面调用此方法，打印出来的是10个10

待会我们一起分析几道闭包的笔试题来做更深入的了解

这里我们番外一下，什么是js的 任务队列

在此之前希望你对promise又简单的了解，不然下方的例子可能看不懂

首先我们要知道，javascript它是单线程语言

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

之所以js是单线程语言

就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用alert()以后进行疯狂console.log，如果没有关闭弹框，控制台是不会显示出一条log信息的

亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。

所以如果全部代码都是同步执行的，这会引发很严重的问题，比方说我们要从远端获取一些数据，难道要一直循环代码去判断是否拿到了返回结果么？就像去饭店点餐，肯定不能说点完了以后就去后厨催着人炒菜的，会被揍的。

于是就有了异步事件的概念，注册一个回调函数，比如说发一个网络请求，我们告诉主程序等到接收到数据后通知我，然后我们就可以去做其他的事情了。

然后在异步完成后，会通知到我们，但是此时可能程序正在做其他的事情，所以即使异步完成了也需要在一旁等待，等到程序空闲下来才有时间去看哪些异步已经完成了，可以去执行。

比如说打了个车，如果司机先到了，但是你手头还有点儿事情要处理，这时司机是不可能自己先开着车走的，一定要等到你处理完事情上了车才能走。

相反，如果是公交车，那就不管你了

因为同步太好理解了，从上向下执行操作，主要讲一下异步事件

微任务（microtask）与宏任务（macrotask）=>异步事件

mircotask（微任务）

promise mutation.oberver process.nextTick

marcotask（宏任务）

setTimeout,setInterval requestAnimationFrame 解析HTML 执行主线程js代码 修改url 页面加载 用户交互

###有些没见过或者不认识的没关系，因为有些是node.js中的 我这边也主要举例浏览器内的事件队列 console.log('script start'); 第一个打印 setTimeout(function() { console.log('setTimeout'); 第五个打印 }, 0); Promise.resolve().then(function() { console.log('promise1'); 第三个打印 }).then(function() { console.log('promise2'); 第四个打印 }); console.log('script end'); 第二个打印

从这里我们可以看出 微任务（mircotask）它的事件比宏任务（marcotask）优先执行

解读：

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数 当指定的事情完成时，Event Table会将这个函数移入Event Queue。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

        let data = [];
        $.ajax({
            url:www.javascript.com,
            data:data,
            success:() => {
                console.log('发送成功!');
            }
        })
        console.log('代码执行结束');
复制代码

ajax进入Event Table，注册回调函数success。 执行console.log('代码执行结束')。 ajax事件完成，回调函数success进入Event Queue。 主线程从Event Queue读取回调函数success并执行。

微任务和宏任务皆为异步任务，也就是说它们都会进入Event Table，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。那么他们之间到底有什么区别呢？

我们先来看看setTimeout（宏任务），这个大家应该很熟悉

    setTimeout(() => {
复制代码

console.log('延时3秒'); },3000) 很明显 3秒后 打印出数据 再看一个函数

    setTimeout(() => {
        task();=>随意的一个函数
    },3000)
    console.log('执行console');
复制代码

有时候我们通过定时器来触发函数的时候有没有发现，有时候明明写的延时3秒，实际却5，6秒才执行函数，当然这个函数需要一定的复杂性，一时间难以写出就 顺带说明一下

我们知道setTimeout这个函数，是经过指定时间后，把要执行的任务(本例中为task())加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于3秒。

关于setTimeout要补充的是，即便主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。也就说哪怕定时器之前没有任何事件，也要4毫秒之后才运行setTimeout 有兴趣的同学可以自行了解

接着我们看下promise（微任务）

    console.log('start')   第一
    let p = new Promise((resolve,reject)=>{
    console.log('Promise1')  第二
    resolve()
    })
    p.then(()=>{
    console.log('Promise2')     第四
    })
    console.log('end')第三
复制代码

有些小伙伴又懵了，promise不是异步操作吗 我们先抛开任务队列不讲，注意了，只有resolve与reject函数 才是真正的异步操作，也就是说在

 new Promise（）{
     这一块还是同步事件
 }
复制代码

因为js是单线程 所以此时 从上到下 先完成同步，再执行异步

接着我们来分析promise（微任务）混搭setTimeout（宏任务）

    setTimeout(()=>{
    console.log('setTimeout1')
    },0)
    let p = new Promise((resolve,reject)=>{
    console.log('Promise1')
    resolve()
    })
    p.then(()=>{
    console.log('Promise2')    
    })
复制代码

最后输出结果是Promise1，Promise2，setTimeout1 虽然同是异步事件，但微任务优先于宏任务（暂时先这么理解）

再看一个例子

    Promise.resolve().then(()=>{
    console.log('Promise1')  
    setTimeout(()=>{
        console.log('setTimeout2')
    },0)
    })

    setTimeout(()=>{
    console.log('setTimeout1')
    Promise.resolve().then(()=>{
        console.log('Promise2')    
    })
    },0)
复制代码

这回是嵌套，大家可以看看，最后输出结果是Promise1，setTimeout1，Promise2，setTimeout2 一步步来分析一下 第一个输出Promise1 应该没什么问题，因为此时是同步 第二个输出setTimeout1 有点问题来了，为什么promise先执行，但是输出的是下面的setTimeout呢？

###此时给大家理一下正确的任务队列

当我们同步事件运行完成的时候，我们先来看看当前的任务队列 首先是 microtasks（微任务队列），此时是上方的promise=>这个应该好理解 然后是macrotasks（宏任务队列），此时很明显是下方的setTimeout 先执行微任务队列中的promise，此时会生成一个新的setTimeout（宏任务）事件 这时候我们宏任务队列增加了一条那就是setTimeout2，那么此时的顺序就是setTimeout1，setTimeout2（还是不懂的同学可以写个记事本记录一下） 注意，微任务此时已经清空了，对吧。因为promise执行完了 此时执行宏任务事件，根据顺序先执行setTimeout1，所以第二个打印setTimeout1，照理说接下去打印setTimeout2，但是再执行setTimeout1的时候这个任务又创建了promise 微任务，此时微任务队列又增加了一条primise2事件 那么老样子，微任务事件一旦生成，优先于宏任务，那么此时又执行了promise2，最后执行setTimeout2

其实是应该当微任务队列全执行完了才执行宏任务队列，因为此处例子不是很复杂，起初只有一条微任务队列

这是浏览器中常见的事件，放更复杂的怕大家怀疑人生，希望大家好好理解一下

接下来我找几道闭包的笔试题来巩固一下什么是闭包

    for (var i = 1; i <= 5; i++) {

    setTimeout( function timer() {

        console.log(i);

    }, 0); 这里输出5个6我想很容易理解
    }
复制代码

好 不修改代码，如何输出1,2,3,4,5，考验了你对闭包的理解与写法

    for (var i = 1; i <= 5; i++) {

        (function(i){

            setTimeout( function timer() {

                  console.log(i);

              },  0 );

        })(i);

    }
复制代码

首先要了解结构，函数套函数 其次明白闭包的作用，它是获取函数内部的变量，那肯定不要写存在变量函数的里面，不然我们无法获取 接下来就是如上方所示

永远不要小瞧代码 下面这道题让新手做 头皮发麻

    function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n);
        }
    };
}
 var a = fun(0);a.fun(1);  a.fun(2);  a.fun(3);
 var b = fun(0).fun(1).fun(2).fun(3);
 var c = fun(0).fun(1);  c.fun(2);c.fun(3);
复制代码

问上面各个函数打印什么

解析这道题之前，先带个小坑，如果我们的函数参数未传参，默认为undefined 也就是说 function fn（a，b）{console.log（a，b）} 那我们使用的时候fn（b） 那么a其实是等于undefined的

好接来下我们来一步步解析一下这道题

一部部来 先看var a 一共四个值 fun(0);a.fun(1);a.fun(2);a.fun(3); 先解释fun(0) 我们此时将代码带入 ,注意此时函数返回的是一个对象

        {
        fun:function(m){
            return fun(m,n);
        }
复制代码

到这里就结束了，刚才提过未带入参数，则默认undefined 那么此时 fun(0)最后打印结果就是undefined 接下来是a.fun(1),注意此时a已经改变了，var a=fun(0) a已经默认返回了一个对象，此时调用对象里面的fun函数 仔细看细节，我们给他转换一下就是

function(1){
 return  fun(1,n) =>注意这里 他调用了上面那个函数 但是这里传入了两个函数 
}
复制代码

到这里是不是有思路了呢，我把函数整理一下 再看一遍

    function fun(n,o){                第一步   首先我们进行fun（0）
    console.log(o);                    也就是说此时里面的值其实是这样的，n=0，o=undefined（这也是第一步的值）
    return {                               第二步再次进行调用fun，但是注意，此时的作用域变了
        fun:function(m){              function（1）
            return fun(m,n);          此时m=1，但是n等于多少呢，n并没有传入，好 它会去父作用域去找，会找到n=0
        }                                      接着调用最初的fun（n,o）这个方法 ，但此时，n形参对应m实参，o形参对应n实参
    };                                          那么此时o=n=0
}                                               所以 控制台 将 打印 0  有没有发现其实我们只要判断n的值就可以了
复制代码

a.fun(2); a.fun(3);的结果其实跟a.fun(1)相同 都是0 不要被迷惑了哦 要相信自己

来分析一下 b ； var b = fun(0).fun(1).fun(2).fun(3);

注意这里全是调用，我们一步一步看

根据第一步的分析我们已经了解了，只需要判断n的值就可以了

fun（0） 得 n=undefined fun（0）.fun（1）得 n=0 按照原来的思路 一直发现 n其实很简单 最终n=2 四次函数调用 控制台将会打印 undefined 0 1 2 现在是不是觉得很简单了呢

第三个 希望小伙伴自己分析一下