快捷導(dǎo)航

JavaScript閉包原理與使用介紹

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

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

1. 認(rèn)識(shí)閉包

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

    <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);
				}
			}

分別點(diǎn)擊5個(gè)按鈕控制臺(tái)輸出的都是5,由于i的作用域使的問題使得代碼沒有按照預(yù)期進(jìn)行輸出。

使用閉包對(duì)代碼進(jìn)行改進(jìn)

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

再分別點(diǎn)擊5個(gè)按鈕控制臺(tái)依次輸出1、2、3、4、5

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

2.1 變量的作用域

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

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

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

2.2 變量的生命周期

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

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

3. 閉包的概念及其作用

3.1 閉包的概念

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

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

3.2 閉包的應(yīng)用

3.2.1 保存私有變量

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

	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 使用閉包實(shí)現(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)

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

您可能感興趣的文章: