簡單說下閉包在事件回調中的用法

時間 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>

明白這裏的閉包的意思了吧,就是要保護這個索引值的變量不被污染,因此用了