闭包

最新推荐文章于 2025-04-24 23:33:53 发布

原创最新推荐文章于 2025-04-24 23:33:53 发布 · 317 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#闭包

本文深入探讨了JavaScript中闭包的概念，展示了如何利用闭包避免全局变量污染，同时提供了经典的闭包应用案例，如通过闭包获取DOM元素索引。此外，文章还讨论了闭包可能导致的内存泄漏问题及其解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闭包:在一个函数外部能够访问函数内部变量的函数

闭包意义：避免全局空间的污染（过多的定义全局变量会增加内存开销，影响协同开发）

弊端：内存泄露：一块内存空间既不能被使用了，也不能被回收

首先先看一下闭包的案例

            //js特性 闭包:在一个函数外部能够访问函数内部变量的函数
			function foo(){
				var a = 10;//闭包变量
				function bar(){ //闭包函数
					console.log(a++);
				}
				return bar;
			}
			//foo();
			//在foo的外部去执行bar
			var baz = foo();
			baz();//10
			baz();//11

闭包的意义

//避免全局空间的污染 （过多的定义全局变量会增加内存开销，影响协同开发）
			
			var obj = (function(){
				var a = 10;
				/*return function(){
					console.log(a);
				}*/
				function foo(){
					console.log(a);
					
				}
				function bar(){
					
				}
				function baz(){
					
					
				}
				return {
					foo:foo,
					bar:bar,
					baz:baz
				}
			})();
			
			
			obj.foo();//10
			obj.bar();
			obj.baz();

闭包经典例子（点击li获得li对应索引)

            var aLi = document.getElementsByTagName("li");
			
			for(var i = 0; i < aLi.length; i++){
			    //1  建议使用
			    (function(i){
					aLi[i].onclick = function(){
						console.log(i+"内容是"+aLi[i].innerHTML);
					}
				})(i);
				
				
			    //2
				aLi[i].onclick = (function(i){
					return function(){
						console.log(i);
					}				
				})(i);
				
		        //3　
		        aLi[i].index = i; //给每个li定义一个属性索引值，赋
		        aLi[i].onclick = function(){
		            console.log("下标索引值为："+this.index+"\n"+"文本内容是："+this.innerHTML);  
		        //  \n换行   索引值从0开始
		        }	
	　　　　
		　　　　
			}

Jquery实现

    //jQuery实现
    $("ul li").click(function(){
        var item = $(this).index();  //获取索引下标 也从0开始
        var textword = $(this).text();  //文本内容
        alert("下标索引值为：" + item +"\n"+ "文本内容是："+textword); //  \n换行
    })