简单说下闭包在事件回调中的用法

时间 2019-11-06

标签简单闭包事件用法繁體版

原文原文链接

说到闭包,想必这是不少童鞋在面试或者是学习的时候常常遇到的问题,javascript

那么咱们先说闭包的含义,下面这句话是我在wiki上面找到的html

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即便已经离开了创造它的环境也不例外。因此，有另外一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时能够有多个实例，不一样的引用环境和相同的函数组合能够产生不一样的实例。java

可能上面的语言说的太生涩了,那我就来简单的解释一下,git

所谓闭包,其实就是主函数返回的一个子函数,子函数的"生存环境"依赖于主函数中的一些变量,而造成的一个相似于"包"的函数,github

可能我说的也比较难理解,那么下面来看这张图面试

c的"生存环境"是依赖于a的,同理b也是,ok,关于闭包,我就介绍到这里,若是仍是有童鞋不是很理解的话,数组

能够猛戳这里闭包

好啦,介绍过了闭包,那么要怎么用呢?异步

其实吧,在鄙人的码农生活中,闭包用的最多的时候,就是用来解决异步的时候,函数

好啦,下面来举个例子,直接来看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</body>
</html>

这是一个最简单的序列,

如今我要作一个功能,实现分别点击这些对应的序列,弹出对应的序列号值,

ok.,咱们就要这么写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</body>
<script>
	var lis = document.getElementsByTagName('li');
	for (var i = 0; i < lis.length; i++) {
		(function(i){
			lis[i].addEventListener('click',function(e){
				console.log("li",lis[i].innerText);
			},false);
		})(i)
	}
</script>
</html>

明白这里的闭包的意思了吧,就是要保护这个索引值的变量不被污染,因此用了

(function(){

})();

这个东西来把参数保护起

ok,今天键盘有点抽风,就说到这里吧