闭包实例

最新推荐文章于 2024-03-06 08:53:29 发布

原创最新推荐文章于 2024-03-06 08:53:29 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

Javascript（原生）专栏收录该内容

12 篇文章

订阅专栏

本文探讨JavaScript闭包的应用，通过具体示例讲解如何利用闭包解决实际问题，如为DOM元素集合绑定点击事件并获取正确的索引。

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

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