闭包

Posted 2021-05-11 Erudite

闭包

简单讲：就是能够读取其他函数内部变量的函数。例如在 javascript 中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成 “定义在一个函数内部的函数” 。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

下面本人通过几个案例与各位读者分享有关闭包的知识点：

例1：

data_list = [0, 1, 2]
for(var i=0; i<data_list.length; i++) {
　　console.log(i, data[i])  
}

// 输出：0 0  1 1  2 2

注：例1，只是简单的做了一个循环，依次打印 data_list 里面的 索引 及 数字

例2：（没有添加闭包函数）

data_list = [0, 1, 2];
for(var i = 0; i < data_list.length; i++) {
    // 循环会发送3次ajax请求
    $.ajax({
        url: "...",
        data: {value: data_list[i]} ,
        success: function(res) {
            console.log(i);   // 后输出：2  （第二个结果）
        }
    })
}
console.log(i)    // 先输出：2  （第一个结果）  

注：例2，并没有添加闭包函数，所以两次 console.log(i) 的值都是2；第一个结果2：是因为ajax执行的是异步请求，所以不会等循环结束再执行；第二个结果也是2：是因为第一个结果早已执行完成，i 的值早已等于2，所以第二个值当然也是2。

例3：（加入闭包函数）

data_list = [0, 1, 2];
for(var i = 0; i < data_list.length; i++) {
     function xx(data) {
　　　　　　$.ajax({

        　　url: "...",
        　　data: {value: data_list[i]} ,
        　　success: function(res) {
           　　console.log(i);   // 后输出：0/1/2  （第二个结果）
        　　}
    　　})
　　　}
　　xx(i)

}} 
console.log(i) // 先输出：2 （第一个结果） 

注：例3，添加了闭包函数，所以两次 console.log(i) 的值都并不相同；第一个结果2：是因为ajax执行的是异步请求，所以不会等循环结束再执行；第二个结果将依次打印0，1，2：是因为每次循环结束都会调用闭包函数 xx(data) 。

总结：如果，各位以后执行循环，循环内容发送异步请求，异步任务成功后，通过闭包来解决。