Js閉包
閉包前要了解的知識
1. 函數作用域
(1).Js語言特殊之處在於函數內部可以直接讀取全局變量
代碼如下:
<script type="text/javascript">
var n=100;
function parent(){
alert(n);
}
parent();//100
</script>
如果在php裡
代碼如下:
<?php
$n=100;
function parent(){
echo $n;
}
parent();//會報錯 n未定義
?>
(2).在函數外部無法讀取函數內的局部變量
代碼如下:
<script type="text/javascript">
function parent(){
var m=50;
}
parent();
alert(m);//報錯 m未定義
</script>
注意函數內部聲明變量時一定要加var,否則就聲明了一個全局變量
代碼如下:
function parent(){
m=50;
}
parent();
alert(m);//50
//當然在php裡更是如此了，
代碼如下:
<?php
function parent(){
global $m;//全局 ，定義與賦值要分開
$m=50;
}
parent();
echo $m;//50
?>
//沒global的話，一樣會報沒定義的錯誤
有時，需要得到函數內部的的局部變量，就需要變通的方法實現利用js變量作用域的特點，如在函數內部定義子函數，對於子函數來說，父函數就是它的全局，子函數可以訪問父函數裡的變量(對於整個js代碼來說又是局部變量)
代碼如下:
<script type="text/javascript">
function parent(){
var m=50;
function son(){
alert(m);
}
return son;
}
var s=parent();//將結果保存在全局裡
s();//50
</script>
Parent內部所有局部變量對其子函數來說都是可見的,但其子函數內的局部變量對其父函數是不可見的，這就是js特有的鏈式作用域結構,子對象會一級一級地向上查找所有父對象的變量,父對象的所有變量對子對象都是可見的，反之不成立！上面的son函數就是閉包
有些同學可能這樣
代碼如下:
function parent(){
var m=50;
function son(){
alert(m);
}
}
parent();
son()//會報 函數son未定義
注意 在javascript裡，在函數裡聲明的函數都是局部的，函數運行完後就釋放了
注意這點與php的區別
代碼如下:
<?php
function parent(){
function son(){
$m=50;
echo $m;
}
}
parent();
son();//輸出50 不會報錯
?>
閉包
函數內部定義函數，連接函數內部和外部的橋梁
閉包的作用有2個:
一是前面提到的讀取函數內部的變量，
二是讓這些變量的值保存在內存中，實現數據共享
下面是幾個閉包的例子
代碼如下:
<script type="text/javascript">
var cnt=(function(){
var i=0;
return function(){
alert(i);
i++;
}
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3
</script>
把匿名函數的執行結果(即對裡面子函數的聲明賦給全局變量cut),i就保存在內存裡了
執行cut()時就直接從內存取值了,i只有cnt()函數才能調用，直接alert(i)是不行的
還可以向閉包內傳參
代碼如下:
var cnt=(function(num){
return function(){
alert(num);
num++;
}
})(5);
cnt();//5
cnt();//6
cnt();//7
//當然還可以調用時傳參
var cnt=(function(){
var i=0;
return function(num){
num+=i;
alert(num);
i++;
}
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5
為了對閉包有更好的理解，我們看以下代碼
比如我想返回一個數組，數組裡面有5個函數，第一個函數彈出0，第二個彈出1...
代碼如果這樣寫
代碼如下:
function box(){
var arr=[];
for(i=0;i<5;i++){
arr=function(){return i;}
}
return arr;
}
var a=box();
alert(a);//包含五個函數體的數組
alert(a[0]());
alert(a[1]());
彈出的函數體
function(){return i;} }
最後這個i是4,之後++成為5
For循環停止
發現均彈出5，明顯不符合我們的要求
解決方案1
自我即時執行裡面的函數
代碼如下:
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);
}
但是我們發現 返回的數組裡的元素是函數執行的結果，但我們想要的是函數有得升級我們的代碼
解決方案2
閉包實現
代碼如下:
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
}
關鍵代碼
代碼如下:
arr=(function(num){
return function(){return num;}
})(i);
i=0 時
arr[0]=(function(num){return function(){return num;}})(0);
1時
arr[1]=(function(num){return function(){return num;}})(1);
以上就是閉包的好處！非常簡單實用吧。