Js闭包

Posted 2021-03-08 一位不愿透露姓氏的张先生

Js闭包

闭包:闭包是指有权访问另一函数作用域中的变量的函数

<div>
    <p>第一个</p>
    <p>第二个</p>
    <p>第三个</p>
</div>
<script>
    let oP = document.getElementsByTagname('p')
</script>

最经典的闭包例子，点击哪一个控制台输出这个元素的index值
A错误写法:

for (let i = 0; i < oP.length; i++){
    oP[i].onclick = function (){
        console.log(i)
    }
}

原理:因为匿名函数中没有i,所以当点击文字然后进行调用其匿名函数打印的时候必须向上查找,一直找到全局里面找到了i。因为for循环执行完以后,全局的i就变成了3,那么此时打印出来的自然也是3。所以不管点击第几个打印出来的都是3
B正确写法:

for (let i = 0; i < oP.length; i++){
    oP[i].onclick = function (j){
        return functio () {
            console.log(j)
        }
    }(i)
}

原理:通过用自执行函数的方式我们可以把i作为参数传给自执行函数,此时的i就成了自执行函数的局部变量。自执行函数会直接执行,但不会销毁这个执行,因为里面还有一个匿名函数。执行后的局部变量i就和外界的全局变量中的i掐断联系了,也就是说传进来的i是多少,自执行函数内的i就是多少。因为还有一个匿名函数的存在,这个局部变量i是不会消失的,此时执行ruturn中的匿名函数,它自己没有i,所以会向上查找,一旦找到局部变量i那么就停止再往上查找了,所以就等于传进来的值而不是等于全局变量i
PS:自执行函数

(function(a){
    console.log(a)
})(2)
等同于
function test(a){
    console.log(a)
}
test(2)

理解闭包:

for (let i = 0; i < oP.length; i++){
    oP[i].onclick = function(j){
        return function(){
            console.log(j)
            console.log(i)
        }
    }(i)
}