JavaScript閉包原理與使用介紹

更新時間：2022年10月18日 08:42:02 作者：愛思考的豬

閉包是js的一個難點也是它的一個特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關于JavaScript閉包函數(shù)的相關資料,需要的朋友可以參考下

1. 認識閉包

閉包有一個很經(jīng)典的場景:使用 for循環(huán)給上面5個按鈕綁定點擊事件。

    <button type="button" class='button'>按鈕</button>
    <button type="button" class='button'>按鈕</button>
	<button type="button" class='button'>按鈕</button>
	<button type="button" class='button'>按鈕</button>
	<button type="button" class='button'>按鈕</button>
    var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = function() {
					console.log(i+1);
				}
			}

分別點擊5個按鈕控制臺輸出的都是5,由于i的作用域使的問題使得代碼沒有按照預期進行輸出。

使用閉包對代碼進行改進

var buttons = document.getElementsByClassName('button');
			for (var i = 0; i < 5; i++) {
				buttons[i].onclick = (function(i){
					return function(){
						console.log(i+1);
					}
				}(i))
			}

再分別點擊5個按鈕控制臺依次輸出1、2、3、4、5

2. 變量的作用域和生命周期

2.1 變量的作用域

作用域即是變量的作用范圍
使用var關鍵字聲明的變量會提升到全局,函數(shù)里面的變量只有在函數(shù)內(nèi)部能夠訪問
使用let和和const關鍵字聲明的變量不提升

上面的代碼中for循環(huán)中的變量i是使用var聲明的,會提升至全局,最終打印輸出的都是全局的i，而在點擊按鈕之前for循環(huán)已經(jīng)走完,因此輸出的都是5。

在使用閉包改進的時候使用立即執(zhí)行函數(shù)將每次循環(huán)的i保留在立即執(zhí)行函數(shù)的內(nèi)部,最終輸出的就是正確的結果。

2.2 變量的生命周期

全局作用域的變量的生命周期是永久的,函數(shù)內(nèi)的變量在函數(shù)執(zhí)行后被回收銷毀。

產(chǎn)生閉包的時候由于函數(shù)的返回值(函數(shù))仍然引用著函數(shù)的局部變量,導致即使函數(shù)執(zhí)行完函數(shù)內(nèi)的變量仍然存在。閉包正是利用這一特性。

3. 閉包的概念及其作用

3.1 閉包的概念

經(jīng)過上面的講述不難發(fā)現(xiàn)閉包主要涉及變量的生命周期和作用域。形成閉包的三個必要條件:

函數(shù)返回值是個函數(shù)
被返回的函數(shù)內(nèi)引用了函數(shù)的局部變量
被返回的函數(shù)在外部被調(diào)用

3.2 閉包的應用

3.2.1 保存私有變量

Javascript中沒有private關鍵字,但可以通過閉包將變量保存在函數(shù)內(nèi)部,從而達到保護變量的作用。

	var getUserInfo = (function() {
		var userInfo = {
			name: 'ian',
			age: 21
		};
		return function() {
			return userInfo;
		}
	}());
	console.log(getUserInfo()); //{name:'ian',age:21}
	console.log(userInfo); //Uncaught ReferenceError: userInfo is not defined

3.2.2 使用閉包實現(xiàn)節(jié)流

	function throttle(fn,delay){
			var timer=null;
		  return function(){
			  if(!timer){
				  timer=setTimeout(()=>{
				  	fn();
					timer =null;
				  },delay)
			  }
		  }
		}
		window.onresize= throttle(function(){
			console.log('resize')
		},500)

到此這篇關于JavaScript閉包原理與使用介紹的文章就介紹到這了,更多相關JS閉包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: