如何通过实例解析js闭包的核心基础应用？

本文共计805个文字，预计阅读时间需要4分钟。

原文：本文实例讲述了JS闭包的应用。分享给家长供大家参考，具体如下：需求：有一个列表，点击某一行，则显示当前是第几行。HTML代码：ppp错误JS代码示例：“

改写后：“本文通过实例展示了JS闭包的用法。以下为具体内容，供家长参考：需求：实现一个列表，点击任意一行，显示该行是列表中的第几行。HTML代码示例：

本文实例讲述了js闭包的应用。分享给大家供大家参考，具体如下：

需求：有一个列表，当点击哪一行，则显示当前是第几行。

html代码：

<p>第一行</p> <p>第二行</p> <p>第三行</p>

错误js代码示范：

function addHander(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=function(){ alert('当前是第'+i+'行');//3 3 3 } } } var nodes=document.getElementsByTagName("p"); addHander( nodes);

从逻辑上来看，毫无漏洞，对不对？

但是，当你每次点击的时候，弹出的都是最后一行。

原理：当页面加载完成之后就调用addHandler函数，为每个节点绑定点击事件处理函数，绑定的是匿名函数，但是，这时候node上的匿名函数并没有被调用，所以，当for循环完成之后i已经等于3了，当你点击节点时，调用匿名函数所以弹出的就是3了。