关于for循环中应用索引实行函数的题目（闭包）

2024年4月8日 149次阅读 来源: KissDuo

今天在前端手艺群中看到有位初学朋侪问了个题目，我贴一下代码：
js:

var pList = document.getElementsByTagName("p");
for(var i=0;i<pList.length;i++){
        pList[i].onclick=function(){
            alert(pList[i].innerHTML);
        }
    }
}

html:

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

他的主意是点击每个P标签的时刻猎取到点击的p标签的html，代码看着没什么题目，可现实报错了~
这个题目预计大部分人一开始都遇到过，为何这条语句不好使呢？
个人明白，页面初始化的时刻i就已从0走到了4，当你点击P的时刻，此时i已变成了5，而pList[5]并不存在，所以会报undefined的毛病，改法有两种：
第一种把pList[i]改成this，当p标签被点击时this直接代表p举行猎取html。
第二种就是：

var pList = document.getElementsByTagName("p");
for(var i=0;i<pList.length;i++){
    (function(e){
        pList[e].onclick=function(){
            alert(pList[e].innerHTML);
        }
    })(i)
}

在点击事宜外到场马上实行函数，把i当作变量传递进点击事宜，如许也可猎取到每次点击的索引。
这个假如深入点说，就涉及到js里至关重要的闭包环节了~
点击事宜在轮回内部，但是还想挪用人家的变量，就像你在别人家看着人家主人在跑步，你还想用跑步机，那末你要么等人家跑完了，你用着人家“跑完”的跑步机（文中的i=5），要么你就让主人给你同时在旁边装置一个如出一辙的跑步机，你们一同（马上实行函数）
大略的写完了，嘿嘿，迎接一同探讨题目斧正毛病，高手能够跳过，写出来也是为了做个笔记，温故而知新~

    原文作者：KissDuo
    原文地址: https://segmentfault.com/a/1190000005769853
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞