js-闭包（妙版）

最新推荐文章于 2024-08-23 21:27:21 发布

原创最新推荐文章于 2024-08-23 21:27:21 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json

Web前端-JS语言核心专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了闭包的概念及其在代码中的好处，如避免全局变量污染、长期驻留变量等。通过实例展示了如何利用闭包实现模块化代码，并讨论了在循环中直接查找对应元素索引的方法。此外，文章还探讨了闭包可能导致的问题，如内存泄露，并提供了解决方案。

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

zccst整理

总结：
1，闭包是什么
闭包

2，闭包好处：
(1）希望一个变量长期驻扎在内存中。
(2）避免全局变量的污染。
(3）私有成员的存在

3，怎么用
模块化代码
例子
在循环中直接找到对应元素的索引
例子

4，可能存在的问题
内存泄露。外部变量与内部变量互相引用。导致内存越来越大。

解决办法：
1，及时释放dom结点对象。

闭包
定义：函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回。


function aaa(){
  var a = 5;
  function bbb(){
    alert(a);
  }
  return bbb;
}
var c = aaa();
c();//5
c();//5

结论：变量一直存在。由于其参数和变量由于被内部函数使用，所以不会被收回。

垃圾回收机制


function aaa(){
  var a = 12;
  a++;
  alert(a);
}
aaa();//13  即函数执行完之后，局部变量被回收。
aaa();//13  再次调用时，重新赋值。

alert(a);//a未定义，即离开作用域后，局部变量已被回收（外部不能访问）。


var a = 12;
function aaa(){
  a++;
  alert(a);
}
aaa();
aaa();
//问题是：污染了全局变量。如果连续调用aaa();则变量a的值会递增。

而我们既想使用局部变量，又想像全局变量一样累加（即闭包），则可如下所示：


//第一版：
function aaa(){
  var a = 1;
  return function(){
    a++;
    alert(a);
  }
}
var b = aaa();
b();//2
b();//3

//第二版：把函数声明改写为函数表达式
var aaa = (function(){
  var a = 1;
  return function(){
    a++;
    alert(a);
  }
})();

aaa();
aaa();

更进一步，把函数变私有，，即模块化代码。


var aaa = (function(){
  var a = 1;
  function bbb(){
    a++;
    alert(a);
  }
  function ccc(){
    a++;
    alert(a);
  }
  return { //json格式
    b:bbb,
    c:ccc
  }
})();

aaa.b();//2
aaa.c();//3  a对于两个函数，相当于全局。


alert(a);  //异常，未定义
alert(bbb);//异常，未定义
alert(ccc);//异常，未定义

在循环中直接找到对应元素的索引


window.onload = function(){
	var aLi = document.getElementsByTagName("li");

	//方式一：有问题
	for (var i = 0; i < aLi.length; i++){
		aLi[i].onclick = function(){
			alert(i);
		};
		//问题：for循环后，i已经是4，所以所有li的click都是4。
	}

	//方式二：
	for (var i = 0; i < aLi.length; i++){
		(function(i){
			//内部函数可以使用外包函数的参数和变量。
			//外包函数执行完毕后，内部函数依然存在。
			aLi[i].onclick = function(){alert(i);}
		})(i);
	}

	//方式三：
	for (var i = 0; i < aLi.length; i++){
		aLi[i].onclick = (function(i){
			//内部函数可以使用外包函数的参数和变量。
			//外包函数执行完毕后，内部函数依然存在。
			return function(){
				alert(i);
			}
		})(i);
	}

};
<ul>
<li>1111111111111</li>
<li>1111111111111</li>
<li>1111111111111</li>
<li>1111111111111</li>
</ul>

IE下引发内存泄露


window.onload = function(){
  var oDiv = document.getElementById("div1");
  oDiv.onclick = function(){
    alert(oDiv.id);
  }

  //方法一：
  window.unonload = function(){
    oDiv.onclick = null;
  }
}

 //方法二：
window.onload = function(){
  var oDiv = document.getElementById("div1");
  var id = oDiv.id;//然后在内部函数中使用id，而不是oDiv即可解决
  oDiv.onclick = function(){
    alert(oDiv.id);
  }
  oDiv = null;
}