javascript闭包的应用简单代码实例
分类：实例代码
关于闭包的概念可以参阅闭包概念简单解析一章节。
先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
ul li{
font-size:12px;
list-style:none;
cursor:pointer;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementsByTagName("li");
var odiv=document.getElementById("show");
for(var index=0;index<lis.length;index++){
lis[index].onclick=function(){
odiv.innerHTML=index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
<li>只有努力奋斗才会有美好的未来。</li>
<li>前端教程网欢迎您，希望能够给大家提供需要的知识。</li>
<li>分享的精神和互助的胸怀是进步的最大源动力。</li>
<li>只有当前的时间才是最真实的，下一秒都是虚幻的。</li>
<li>每一天都是新的，要好好的珍惜。</li>
</ul>
</body>
</html>
上面的代码我们的本意是点击li元素能够显示对应的索引。
出现这种状况的原因是，当事件处理函数绑定完毕之后，index的值也就变成了5了。
代码修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
ul li{
font-size:12px;
list-style:none;
cursor:pointer;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementsByTagName("li");
var odiv=document.getElementById("show");
for(var index=0;index<lis.length;index++){
(function(index){
lis[index].onclick = function(){
odiv.innerHTML=index;
}
})(index);
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
<li>只有努力奋斗才会有美好的未来。</li>
<li>前端教程网欢迎您，希望能够给大家提供需要的知识。</li>
<li>分享的精神和互助的胸怀是进步的最大源动力。</li>
<li>只有当前的时间才是最真实的，下一秒都是虚幻的。</li>
<li>每一天都是新的，要好好的珍惜。</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面做一下简单介绍。
此代码是将函数当返回值，通过自执行函数的参数，把变量index传进去（因为是通过函数参数的方式传递，所以内部的index与外部的index就已经隔绝），然后因为返回函数要引用这个index变量，所以当for循环结束也不会释放index变量。即在内存中保存了index变量的值。
javascript闭包的应用简单代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript闭包的应用简单代码实例就介绍到这了。
javascript闭包的应用简单代码实例属于前端实例代码，有关更多实例代码大家可以查看。