欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Javascript閉包與應(yīng)用的詳解

 更新時間：2021年04月21日 11:30:43   作者：Marshal_dj  
這篇文章主要介紹了關(guān)于Javascript閉包與應(yīng)用的詳解,文中有非常詳細(xì)的代碼示例.對正在學(xué)習(xí)js的伙伴們有很好的幫助,需要的朋友可以參考下

前言

Javascript閉包在學(xué)習(xí)過程中一般較難理解，本文從什么是閉包，常見閉包示例，閉包作用，閉包應(yīng)用及閉包問題等方面來介紹閉包，希望能給大家?guī)砀顚哟蔚恼J(rèn)識，有不恰當(dāng)之處請指出，謝謝。

一、什么是閉包？

閉包是指一個嵌套的內(nèi)部(子)函數(shù)引用了父函數(shù)作用域中數(shù)據(jù)的函數(shù)，這就產(chǎn)生了閉包。

關(guān)鍵理解：

1. 產(chǎn)生閉包必須要有嵌套函數(shù)
2. 閉包是函數(shù)，并是嵌套的內(nèi)部函數(shù)
3. 閉包內(nèi)部函數(shù)必須要引用父函數(shù)作用域中數(shù)據(jù)

如果不滿足以上條件，則不能產(chǎn)生閉包，接下來示例說明。

1.1閉包滿足條件代碼

<script>
			function person(){
				var name='marshal';
				function student(){ //聲明子函數(shù)
					console.log(name);//引用父函數(shù)作用域的變量name
				}
			}
			person();//函數(shù)執(zhí)行，產(chǎn)生閉包
		</script>

在這里插入圖片描述

1.2閉包產(chǎn)生時機(jī)

	<script>
			function person(){
				var name='marshal';//js執(zhí)行此行時，產(chǎn)生閉包
				function student(){ //聲明子函數(shù)
					console.log(name);//引用父函數(shù)作用域的變量name
				}
				student();//內(nèi)部函數(shù)在外部函數(shù)調(diào)用
			}
			person();//函數(shù)執(zhí)行，雖滿足閉包條件，但未產(chǎn)生閉包
		</script>

在這里插入圖片描述

閉包產(chǎn)生時機(jī)：嵌套子函數(shù)代碼塊有引用父函數(shù)作用域的數(shù)據(jù)，并該嵌套子函數(shù)要執(zhí)行前，創(chuàng)建上下文時產(chǎn)生閉包?；蛘吆唵握f該該嵌套子函數(shù)在外部被執(zhí)行時，此刻產(chǎn)生了閉包。

<script>
			function person(){
				var name='marshal';
				function student(){
					console.log(name);  //該方法代碼內(nèi)為閉包代碼
				}
				return student;
			}
			var p=person();//因創(chuàng)建子函數(shù)對像，此時產(chǎn)生第一次閉包,并將子函數(shù)student返回給p，由于p沒有消失，子函數(shù)引用的變量name，一直在內(nèi)存在存儲，直到將p=null,進(jìn)行回收
			p();//執(zhí)行子函數(shù)的閉包代碼塊，輸出"marhsal"
			p();//第二次執(zhí)行子函數(shù)的閉包代碼塊，輸出"marhsal"
			person();//第二次創(chuàng)建子函數(shù)調(diào)對象，此時產(chǎn)生第二次閉包,但不執(zhí)行子函數(shù)student代碼塊      
		</script>

二、常見閉包示例

2.1 子函數(shù)做為實(shí)參傳遞

<script>
			function setTimeoutTest(message,time){
				setTimeout(function(){
					alert(message);//嵌套子函數(shù)引用父函數(shù)變量message,產(chǎn)生閉包
				},time);
			}  
			setTimeoutTest('提示信息',1000);
		</script>

2.2 計數(shù)器使用(函數(shù)返回)

<script>
				function count(){
					var i=1;
					function add(){
						i++;
						console.log(i);
					}
					return add;
				}
				var c=count();//生產(chǎn)閉包
				c();//2
				c();//3
				c();//4
		</script>

三、閉包作用

3.1 閉包作用

1）子函數(shù)引用父函數(shù)的變量或函數(shù)，生命周期延長

2）其變量或函數(shù)一直存在，外部可以訪問函數(shù)內(nèi)部的值

<script>
			function count(){
				var i=1;
				function add(){
					i++;
					console.log(i);
				}
				return add;
			}
			var c=count();
			c();//2
			c();//3  i的生命周期延長
	</script>

四、閉包應(yīng)用

4.1 自定義封裝js代碼

外部js代碼  out.js  實(shí)現(xiàn)自加與自減
(function count(){
	var i=1;
	function add(){
		i++;
		console.log(i);
	}
	function subtract(){
		i--
		console.log(i);
	}
	window.count={
		add:add,
		subtract:subtract
	}
})();

引用 out.js代碼
<script src=out.js></script>
		<script>
			count.add(); //2
			count.subtract();//1
			count.subtract();//0
		</script>

五、閉包問題

5.1 閉包與this

<script>
     var name="marshal"; //創(chuàng)建全局變量
	 var person={
		 name:"leo",
		 getName:function(){ //返回匿名函數(shù)
			 return function(){  //返回this.name
				return this.name;  //返回字符串
			 }
		 }
	 };
	 alert(person.getName()()); //輸出marshal,內(nèi)部函數(shù)不可能直接訪問外部函數(shù)this
	 
</script>

解決方法

<script>
	     var name="marshal";
			 var person={
				 name:"leo",
				 getName:function(){
					 var that=this;//把this保存到閉包可以訪問的另一個變量中
					 return function(){
						return that.name;
					 }
				 }
			 };
			 alert(person.getName()());//that 指向person，而不是window
	</script>

5.2 內(nèi)存泄露

在使用閉包時，因變量一直存在，需要解除對象的引用，將對象設(shè)置為null, 從而確保其內(nèi)存在適當(dāng)時候可以被回收。

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

相關(guān)文章

最新評論