#什么是闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

#特点

1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单来说，就是函数嵌套函数，内部函数使用了外部函数的变量就会形成闭包。

#闭包的实现

JavaScript中闭包的应用使用闭包需要注意的地方：闭包使得函数中的变量都保存在内存中，内训消耗大，IE中有可能导致内存泄漏在父函数外部改变父函数内部变量的值。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
          const circle = function(r) {
    this.PI = 3.14
    return function(r) {
        return r * r * this.PI
    }
}

console.log(circle.area(10))

function outer() {
    var  a = '123'
    return function add(){
        // 在这里因为作用域的关系，add是能访问到outer的所有变量的，但是outer是访问不到add的变量；　
        // 所以思路一转，把add的值作为结果return出来变通实现outer外部函数访问到了内部函数变量
        // add就是一个闭包函数，因为他能够访问到outer函数的作用域，add中没有找到变量a，则会继续往上层作用域找
        console.log(a);    
    }
}
var  inner = outer()   // 获得add闭包函数
inner()   //"123"

        

#闭包的用途

在JavaScript中，如果你想在循环中为每个元素绑定点击事件，并且希望事件处理函数能够正确地访问到当前循环迭代时的变量值，就需要用到闭包来解决这个问题。否则，所有事件处理函数将会引用同一个变量，而这个变量在循环结束时的值将会是循环的最后一个值。下面是一个使用闭包实现正确绑定点击事件的例子：

          
1
2
3
4
5
6
7
8
9
10
11
          // 假设我们有一个按钮列表，想要为每个按钮绑定点击事件，展示其对应的索引
const buttons = document.querySelectorAll('.btn');

for (let i = 0; i < buttons.length; i++) {
    (function(index) { // 使用立即执行函数形成闭包，保存当前的index值
        buttons[i].addEventListener('click', function() {
            console.log("当前点击的按钮索引:", index);
        });
    })(i);
    // 立即执行函数，并传入当前的i
}

        

在这个例子中，通过创建一个立即执行的匿名函数 (function(index){...})(i)，我们为每次循环创建了一个新的作用域，这样每个事件处理函数就绑定了各自迭代时的 index 值。当按钮被点击时，事件处理函数就能正确输出其对应的索引，而不是所有按钮点击都输出循环结束时 index 的最终值。这是因为每次循环迭代时创建的闭包都保留了对当时 index 变量值的引用。