前端面試題15----閉包

Rayshaan發表於2020-12-08
前端面試題

閉包

閉包:函式巢狀
功能(2種作用獨立):
1.擴大了變數的作用域
2.縮小變數的作用域，防止變數汙染

//擴大了變數的作用域
function fn(){
	//函式add就是閉包
	// 正常情況下 add的作用範圍是fn內部
	//通過return將add的作用範圍擴大到fn外,即可在外面操作add內的變數
	return function add(x,y){
		console.log(x+y);
	}
}
var fn1=fn();
fn1(1,2);//3


//縮小變數的作用域，防止變數汙染
(function(){
	//放置的是一段有特殊功能的程式碼
	var m=10;
})();
// 自呼叫函式 ;( function(){})(); 前後都需要有;
console.log(m);//10

閉包應用

1.遍歷新增事件

<body>
	<button>按鈕</button>
	<button>按鈕</button>
	<button>按鈕</button>
	<button>按鈕</button>
	<button>按鈕</button>
	<button>按鈕</button>

	<script>
		var btns=document.getElementsByTagName('button');
		for(var i=0;i<btns.length;i++){
			/*btns[i].οnclick=function(){
				// i是全域性變數，點選的時候i的值已經是btns.length;
				btn[i].style.background='lime';
			}*/
			//通過閉包改進(縮小了i的作用域)
			(function(i){
				btns[i].onclick=function(){
					btns[i].style.background='lime';
				}
			})(i);
		}
	</script>
</body>

返回閉包時牢記的一點就是：返回函式不要引用任何迴圈變數，或者後續會發生變化的變數

2.計時器

//計數器
// 1、可以在函式的外部訪問到函式內部的區域性變數
// 2、讓這些變數始終儲存在記憶體中，不會隨著函式的結束而自動銷燬
var add=(function(){
	var count=0;
	return function(){
		return count+=1;
	}
})();
console.log(add());//1
console.log(add());//2
console.log(add());//3
console.log(add());//4

在返回的物件中，實現了一個閉包，該閉包攜帶了區域性變數count，並且，從外部程式碼根本無法訪問到變數count。換句話說，閉包就是攜帶狀態的函式，並且它的狀態可以完全對外隱藏起來。

相關文章