js閉包實(shí)例匯總
Js閉包
閉包前要了解的知識
1. 函數(shù)作用域
(1).Js語言特殊之處在于函數(shù)內(nèi)部可以直接讀取全局變量
<script type="text/javascript">
var n=100;
function parent(){
alert(n);
}
parent();//100
</script>
如果在php里
<?php
$n=100;
function parent(){
echo $n;
}
parent();//會報(bào)錯(cuò) n未定義
?>
(2).在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量
<script type="text/javascript">
function parent(){
var m=50;
}
parent();
alert(m);//報(bào)錯(cuò) m未定義
</script>
注意函數(shù)內(nèi)部聲明變量時(shí)一定要加var,否則就聲明了一個(gè)全局變量
function parent(){
m=50;
}
parent();
alert(m);//50
//當(dāng)然在php里更是如此了,
<?php
function parent(){
global $m;//全局 ,定義與賦值要分開
$m=50;
}
parent();
echo $m;//50
?>
//沒global的話,一樣會報(bào)沒定義的錯(cuò)誤
有時(shí),需要得到函數(shù)內(nèi)部的的局部變量,就需要變通的方法實(shí)現(xiàn)利用js變量作用域的特點(diǎn),如在函數(shù)內(nèi)部定義子函數(shù),對于子函數(shù)來說,父函數(shù)就是它的全局,子函數(shù)可以訪問父函數(shù)里的變量(對于整個(gè)js代碼來說又是局部變量)
<script type="text/javascript">
function parent(){
var m=50;
function son(){
alert(m);
}
return son;
}
var s=parent();//將結(jié)果保存在全局里
s();//50
</script>
Parent內(nèi)部所有局部變量對其子函數(shù)來說都是可見的,但其子函數(shù)內(nèi)的局部變量對其父函數(shù)是不可見的,這就是js特有的鏈?zhǔn)阶饔糜蚪Y(jié)構(gòu),子對象會一級一級地向上查找所有父對象的變量,父對象的所有變量對子對象都是可見的,反之不成立!上面的son函數(shù)就是閉包
有些同學(xué)可能這樣
function parent(){
var m=50;
function son(){
alert(m);
}
}
parent();
son()//會報(bào) 函數(shù)son未定義
注意 在javascript里,在函數(shù)里聲明的函數(shù)都是局部的,函數(shù)運(yùn)行完后就釋放了
注意這點(diǎn)與php的區(qū)別
<?php
function parent(){
function son(){
$m=50;
echo $m;
}
}
parent();
son();//輸出50 不會報(bào)錯(cuò)
?>
閉包
函數(shù)內(nèi)部定義函數(shù),連接函數(shù)內(nèi)部和外部的橋梁
閉包的作用有2個(gè):
一是前面提到的讀取函數(shù)內(nèi)部的變量,
二是讓這些變量的值保存在內(nèi)存中,實(shí)現(xiàn)數(shù)據(jù)共享
下面是幾個(gè)閉包的例子
<script type="text/javascript">
var cnt=(function(){
var i=0;
return function(){
alert(i);
i++;
}
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3
</script>
把匿名函數(shù)的執(zhí)行結(jié)果(即對里面子函數(shù)的聲明賦給全局變量cut),i就保存在內(nèi)存里了
執(zhí)行cut()時(shí)就直接從內(nèi)存取值了,i只有cnt()函數(shù)才能調(diào)用,直接alert(i)是不行的
還可以向閉包內(nèi)傳參
var cnt=(function(num){
return function(){
alert(num);
num++;
}
})(5);
cnt();//5
cnt();//6
cnt();//7
//當(dāng)然還可以調(diào)用時(shí)傳參
var cnt=(function(){
var i=0;
return function(num){
num+=i;
alert(num);
i++;
}
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5
為了對閉包有更好的理解,我們看以下代碼
比如我想返回一個(gè)數(shù)組,數(shù)組里面有5個(gè)函數(shù),第一個(gè)函數(shù)彈出0,第二個(gè)彈出1...
代碼如果這樣寫
function box(){
var arr=[];
for(i=0;i<5;i++){
arr=function(){return i;}
}
return arr;
}
var a=box();
alert(a);//包含五個(gè)函數(shù)體的數(shù)組
alert(a[0]());
alert(a[1]());
彈出的函數(shù)體
function(){return i;} }
最后這個(gè)i是4,之后++成為5
For循環(huán)停止
發(fā)現(xiàn)均彈出5,明顯不符合我們的要求
解決方案1
自我即時(shí)執(zhí)行里面的函數(shù)
function box(){
var arr=[];
for(i=0;i<5;i++){
arr=(function(num){return i;})(i);
}
return arr;
}
var a=box();
for(var i=0;i<a.length;i++){
alert(a);
}
但是我們發(fā)現(xiàn) 返回的數(shù)組里的元素是函數(shù)執(zhí)行的結(jié)果,但我們想要的是函數(shù)有得升級我們的代碼
解決方案2
閉包實(shí)現(xiàn)
function box(){
var arr=[];
for(var i=0;i<5;i++){
arr=(function(num){
return function(){return num;}
})(i);
}
return arr;
}
var arr=box();
for(var i=0;i<5;i++){
alert(arr());//0,1,2,3,4
}
關(guān)鍵代碼
arr=(function(num){
return function(){return num;}
})(i);
i=0 時(shí)
arr[0]=(function(num){return function(){return num;}})(0);
1時(shí)
arr[1]=(function(num){return function(){return num;}})(1);
以上就是閉包的好處!非常簡單實(shí)用吧。
相關(guān)文章
原生javascript 學(xué)習(xí)之js變量全面了解
下面小編就為大家?guī)硪黄鷍avascript 學(xué)習(xí)之js變量全面了解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07js腳本學(xué)習(xí) 比較實(shí)用的基礎(chǔ)
js腳本學(xué)習(xí) 比較實(shí)用的基礎(chǔ)...2006-09-09前端?el-table?本地搜索的實(shí)現(xiàn)代碼
這篇文章主要介紹了前端?el-table?本地搜索的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08淺談JavaScript中的Math.atan()方法的使用
這篇文章主要介紹了JavaScript中的Math.atan()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06