什么是闭包：内部函数持有外部函数变量的引用
作用域继承：大盒子里面有个小盒子，小盒子可以拿大盒子里面的东西，而大盒子不知道小盒子里面有什么
闭包的作用：
- 保护：避免变量名称重复（Jquery中大量使用闭包）
- 保存：保存变量，解决选项卡问题
经典问题：选项卡问题 - 循环绑定事件导致的索引问题
选项卡例子及三种解决方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="btnBox">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
</body>
<script type="text/javascript">
var btnBox = document.getElementById("btnBox"),
inputs = btnBox.getElementsByTagName('input')
var len = inputs.length
// FIXME 选项卡问题：循环绑定事件导致的索引问题
/* for (var i = 0; i < len; i++) {
inputs[i].onclick = function () {
alert(i)
}
}*/
// 方法1：闭包 - 用来保存私有变量， !, +, -, ~ 表示立即执行匿名函数，相当于
for (var j = 0; j < len; j++) {
!function (j) {
inputs[j].onclick = function () {
alert(j)
}
}(j)
}
// 方法2：使用自定义属性，给每个对象添加索引属性
for (var i = 0; i < len; i++) {
inputs[i].index = i
inputs[i].onclick = function () {
alert(this.index)
}
}
// 方法3：es6 let
for (let i = 0; i < len; i++) {
inputs[i].onclick = function () {
alert(i)
}
}
</script>
</html>
网友评论