閉包 引用代碼片段
//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>