当前位置: 代码迷 >> Web前端 >> 闭包范例
  详细解决方案

闭包范例

热度:69   发布时间:2012-10-07 17:28:51.0
闭包实例

闭包是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;
}
}
?

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

  相关解决方案