闭包的总结

最新推荐文章于 2020-05-14 11:42:56 发布

于丸

最新推荐文章于 2020-05-14 11:42:56 发布

阅读量138

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Ych_cxy/article/details/99732739

版权

js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

先介绍一下全局变量和局部变量的优缺点
全局变量：可以重用、但是会造成全局污染而且容易被篡改
局部变量：仅函数内使用不会造成全局污染也不会被篡改、不可以重用
从上面可以看出全局变量和局部变量的优缺点刚好是相对的。闭包的出现正好结合了全局变量和局部变量的优点。

何时使用闭包
希望重用一个对象，又保护对象不被污染篡改时
缺点:由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

var foo = (function() {
    var n = 0;
    return {
        add: function () {
            return ++n;
        },
        clearVariable: function () {
            n = null;
        }
    }
})();

外部无法访问到闭包里面的变量，但可以在闭包内部返回一个方法，该方法将闭包内部的变量设置为null，让变量失去引用，会被系统自动回收。

实际上如果只是要把闭包内的一些变量给删除，那么我觉得这样的程序设计是有问题的，如果你的变量只需要用一次，就要删除，那么使用闭包来实现这样的方法显然是浪费。如果闭包不需要了，想删除闭包，直接 foo = null; 就可以了。
接下来说几个闭包常用的用处

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>4</button>

	<script>
		//1. 闭包解决循环添加单机事件总是打印最后一个的索引的问题
		var l = document.querySelectorAll("button")
		for(var i = 0;i < l.length; i++){
			(function(i){
				l[i].onclick = function(){
					alert(i)
				}
			})(i)
		}
		
		
		
		//2.解决定时器不能传参的问题
		// function f(a){
		// 	setTimeout(function(a){
		// 		alert(a)  //即使传了也是undefined
		// 	},3000)
		// }
		// f(3)
		//解决
		function f(x){
			return function f1(){
				alert(x)
			}
		}
		setTimeout(f(100),3000) //闭包向定时器传参
		
		
		
		//3.闭包持续增加一个值得大小(可以写在外面定义成全局变量,可是万一别人改了怎么办)
		function ff(){
			var num = 1
			return function(){
				num ++
				alert(num)
			}
		}
		
		var ff1 = ff()
		ff1()
		ff1()
		ff1()
		ff1()
		console.log(num) //报错,函数内能访问函数外的变量,反之不行
		
	</script>
</body>
</html>