了解闭包

闭包的含义

官方定义：闭包就是函数内部的函数。
是不是有点难理解？没事，小编在这里给大家解释一下。
函数A里面嵌套着函数B，函数B能够访问到函数A外部的变量，并且形成了一个不会销毁的函数空间，这就是闭包。
故，形成闭包有三个必备的条件：

在函数 A 内部直接或者间接返回一个函数 B

2. B 函数内部使用着 A 函数的私有变量(私有数据)

3. A 函数外部有一个变量接收着函数 B

注意：以上条件缺一不可！！！

闭包的作用

既然了解了闭包，那总得知道闭包在我们的开发工作中有什么作用吧。比如当你需要延长变量的生命周期或者你需要访问某一个函数内部的私有数据的时候，你就可以使用闭包来解决。话不多说，我们直接举例说明。

代码一：

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
</body>
<script>
    var btns = document.querySelectorAll('button')

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            console.log(i)
        }
    }
</script>

效果：

在这里插入图片描述

点击以上按钮你会发现，无论你点击哪个按钮，后台打印出来的都是4。只是因为，我们这串代码这有 i=0,i=1,i=2,i=3 这4个内容，无论你有没有点击按钮for循环都会执行，当你点击按钮时，for循环已经执行完毕，i的值已经循环到5了，所有你每次点击的时候都会打印5。

那如果想达到我们预想中的结果，点击1的时候打印0，点击2的时候打印1，点击3的时候打印2，点击4的时候打印4，那这个时候我们就得用到闭包函数了。

代码二：

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
</body>
<script>
	var btns = document.querySelectorAll('button')

    function A(j){
        btns[j].onclick = function(){
            console.log(j);

        }
    }

    for(var i=0;i<btns.length;i++){
        A(i)
    }
</script>