关于闭包的理解及利用闭包的例子

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		// 闭包就是返回一个函数然后延迟执行，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。不会污染里面的变量，例如计数案例：
		function create_counter(initial) {
			var x = initial || 0;
			return {
				inc: function () {
					x += 1;
					return x;
				}
			}
		}
		var c1 = create_counter();
		c1.inc(); //1
		c1.inc(); //2
		var c2 = create_counter(10);
		c2.inc(); //11
		c2.inc(); //12
		// 我们本来希望的是点击不同的clickBox，显示不同的i，但事实是无论我们点击哪个clickBox，输出的都是5。下面我们来看下，如何用闭包搞定它。
		// 原先：
		var clickBoxs = document.querySelectorAll('.clickBox')
		for (var i = 0; i < clickBoxs.length; i++) {
			clickBoxs[i].onclick = function () {
				console.log(i)
			}
		}
		// 利用闭包：
		function iteratorFactory(i) {
			var onclick = function (e) {
				console.log(i)
			}
			return onclick;
		}
		var clickBoxs = document.querySelectorAll('.clickBox')
		for (var i = 0; i < clickBoxs.length; i++) {
			clickBoxs[i].onclick = iteratorFactory(i)
		}
	</script>
</body>

</html>
关于闭包的理解及利用闭包的例子

猜你喜欢
