js閉包實例匯總

更新時間：2014年11月09日 09:29:21 投稿：hebedich

本文是通過實例來幫助大家深刻理解js閉包，是篇非常不錯的文章，這里推薦給大家，有需要的小伙伴可以參考下

Js閉包
閉包前要了解的知識
1. 函數(shù)作用域
(1).Js語言特殊之處在于函數(shù)內(nèi)部可以直接讀取全局變量

<script type="text/javascript">

var n=100;

function parent(){

  alert(n);

}

parent();//100

</script>

如果在php里

復(fù)制代碼代碼如下:

<?php

$n=100;

function parent(){

  echo $n;

}

parent();//會報錯 n未定義

?>

(2).在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量

復(fù)制代碼代碼如下:

<script type="text/javascript">

function parent(){

  var m=50;

}

parent();

alert(m);//報錯 m未定義

</script>

注意函數(shù)內(nèi)部聲明變量時一定要加var,否則就聲明了一個全局變量

復(fù)制代碼代碼如下:

function parent(){

m=50;

}

parent();

alert(m);//50

//當(dāng)然在php里更是如此了，

復(fù)制代碼代碼如下:

<?php

function parent(){

  global $m;//全局 ，定義與賦值要分開

  $m=50;

}

parent();

echo $m;//50

?>

//沒global的話，一樣會報沒定義的錯誤

有時，需要得到函數(shù)內(nèi)部的的局部變量，就需要變通的方法實現(xiàn)利用js變量作用域的特點，如在函數(shù)內(nèi)部定義子函數(shù)，對于子函數(shù)來說，父函數(shù)就是它的全局，子函數(shù)可以訪問父函數(shù)里的變量(對于整個js代碼來說又是局部變量)

復(fù)制代碼代碼如下:

<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é)可能這樣

復(fù)制代碼代碼如下:

function parent(){

   var m=50;

   function son(){

        alert(m);

   }

}

parent();

son()//會報 函數(shù)son未定義

注意在javascript里，在函數(shù)里聲明的函數(shù)都是局部的，函數(shù)運行完后就釋放了
注意這點與php的區(qū)別

復(fù)制代碼代碼如下:

<?php

function parent(){

  function son(){

      $m=50;

      echo $m;

  }

}

parent();

son();//輸出50 不會報錯

?>

閉包

函數(shù)內(nèi)部定義函數(shù)，連接函數(shù)內(nèi)部和外部的橋梁
閉包的作用有2個:
一是前面提到的讀取函數(shù)內(nèi)部的變量，
二是讓這些變量的值保存在內(nèi)存中，實現(xiàn)數(shù)據(jù)共享
下面是幾個閉包的例子

復(fù)制代碼代碼如下:

</script>

把匿名函數(shù)的執(zhí)行結(jié)果(即對里面子函數(shù)的聲明賦給全局變量cut),i就保存在內(nèi)存里了
執(zhí)行cut()時就直接從內(nèi)存取值了,i只有cnt()函數(shù)才能調(diào)用，直接alert(i)是不行的
還可以向閉包內(nèi)傳參

復(fù)制代碼代碼如下:

var cnt=(function(num){

return function(){

    alert(num);

    num++;

  }

})(5);

cnt();//5

cnt();//6

cnt();//7

//當(dāng)然還可以調(diào)用時傳參

var cnt=(function(){

    var i=0;

return function(num){

    num+=i;

    alert(num);

    i++;

  }

})();

cnt(1);//1

cnt(2);//3

cnt(3);//5

為了對閉包有更好的理解，我們看以下代碼
比如我想返回一個數(shù)組，數(shù)組里面有5個函數(shù)，第一個函數(shù)彈出0，第二個彈出1...
代碼如果這樣寫

復(fù)制代碼代碼如下:

function box(){

  var arr=[];

  for(i=0;i<5;i++){

      arr=function(){return i;}

    }

return arr;   

}

var a=box();

alert(a);//包含五個函數(shù)體的數(shù)組

alert(a[0]());

alert(a[1]());

彈出的函數(shù)體
function(){return i;} }
最后這個i是4,之后++成為5
For循環(huán)停止
發(fā)現(xiàn)均彈出5，明顯不符合我們的要求

解決方案1
自我即時執(zhí)行里面的函數(shù)

復(fù)制代碼代碼如下:

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
閉包實現(xiàn)

復(fù)制代碼代碼如下:

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)鍵代碼

復(fù)制代碼代碼如下:

arr=(function(num){
return function(){return num;}
})(i);