标签:index for log click 闭包 点击 UNC get cti
闭包:闭包是指有权访问另一函数作用域中的变量的函数
<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)
}
标签:index for log click 闭包 点击 UNC get cti
原文地址:https://www.cnblogs.com/kaizhadiyishuai/p/12344901.html