首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

闭包范例

2012-10-07 
闭包实例闭包是JS中重点难点,自己看了N多文章和实例,检测一下!?下面这个ul,如何点击每一列的时候alert其in

闭包实例

闭包是JS中重点难点,自己看了N多文章和实例,检测一下!

?

下面这个ul,如何点击每一列的时候alert其index?<ul id=”test”><li>这是第一条</li><li>这是第二条</li><li>这是第三条< /li></ul>

?

?

按照常规的思路,我们会像下面这样子写;那么运行的结果是什么呢?0、1、2、3 它只是把for循环跑了一遍,关键点来了,我们如何获取每个li的index属性?oTestList是一个数组,但很遗憾的是,通过getElementsByTagName取得的数组是没有index属性的,所以没法直接获取点击时的Index,那么我们只有自己写个方法了!

?

看看我们自己写的方法吧!正是采用了闭包的相关原理,我这里采取了两种写法,但本质是一样的

//第一种写法,两者的本质都是一样的,这种写法更容易理解 function getIndex(){ var oTestList = document.getElementById("test").getElementsByTagName("li");      for (var i = 0; i < oTestList.length; i++) {         oTestList[i].onclick = new popNum(i);     } }  function popNum(oNum){     return function(){          alert('您单击的是第'+oNum+'项');    } } window.onload = function(){     getIndex(); }
??
//第二种写法,这种写法更能体现闭包的实质window.onload=function(){var oTestList = document.getElementById("test").getElementsByTagName("li");  for (var i = 0; i < oTestList.length; i++){function listFunc(i){this.clickFun = function(){alert("列表项" + i);}}var newFunc = new listFunc(i);//此处必须新建oTestList[i].onclick = newFunc.clickFun;}}
?

如果大家还有什么比较典型的例子,就贴上来一起讨论一下吧!

热点排行