JavaScript 中 閉包 原理
阿新 • • 發佈：2018-11-14
閉包 引用程式碼片段
//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>