闭包 引用代码片段
//var i=1;//污染全局
function fun(){
var i=1; //函数内变量 ao释放
console.log(i++);
}
fun();//1
fun();//1
//i=0; 全局污染之后变量 会被影响
fun();//1
fun();//1运行结果是 1 1 1 1
模仿一个场景 我们想要使用 变量 i 中的值 让其自动累加
让而 又不想让 var i 放入全局 污染全局变量
解决方案
闭包 解决
- 用外层函数包裹内层函数对象
- 外层函数将内层函数对象返回到外部
- 使用者调用外层函数, 获得返回的内层函数
// 用外层函数包裹 变量和内层函数
function outer(){
var i=1; //外层函数内将内层函数对象返回
return function (){
console.log(i++);
}
}
fun();//1
fun();//2
i=0; //全局变量修改不了 闭包中的变量
fun();//3
fun();//4运行结果为1 2 3 4
下面给大家演示一下 闭包案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<script>
var btns= document.getElementsByTagName("button");
//获取到当前 按钮的 选择器
for(var i=0;i<btns.length;i++){//遍历当前按钮
btns[i].onclick=(function(){
//为按钮绑定点击事件 将函数封装 ({fun() })();
var myi=i;
//闭包获取当前的i 不被全局或者因函数内ao释放而释放
return function(){ alert("我是当前第"+myi+"个按钮"); }
})();
}
</script>
</body>
</html>