<!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>
关于闭包的理解及利用闭包的例子
猜你喜欢
转载自blog.csdn.net/qq_41111677/article/details/108087745
今日推荐
周排行