Javascript 深刻理解閉包

閉包（closure）是Javascript語言的一個重點，也是難點，對於新手來講，概念過於抽象；而如今書上的大部分解釋都比較含糊，本文將把閉包掰開了、揉碎了講個清楚。

Tips:我的博客排版、UI更佳；地址：https://haonancx.github.io/js...

閉包

閉包是指能夠包含自由（未綁定到特定對象）變量的代碼塊；這些變量不是在這個代碼塊內或者任何全局上下文中定義的，而是在定義代碼塊的環境中定義（局部變量）（百度百科）？？？ 這他娘叫講個清楚，別怕，讓我娓娓道來。

閉包，簡單來講就是能夠讀取其餘函數內部變量的函數。只要知足這一點的函數，均可以叫閉包。

要理解閉包，首先得理解做用域。

做用域主要分爲兩種：全局變量和局部變量。

全局變量？局部變量？

• 局部變量:只能用於定義它函數內部。對於其餘的函數或腳本代碼是不可用的。

{% highlight ruby %}

function myFunction() {
var n = 5;
return n * n;
}
myFunction();// 25

{% endhighlight %}

• 全局變量：函數能夠訪問由函數內部定義的變量。

{% highlight ruby %}

var n = 5;
function myFunction() {
return n * n;
}
myFunction();// 25

{% endhighlight %}

Javascript語言的特殊之處，就在於函數內部能夠直接讀取全局變量。例如：

{% highlight ruby %}

　　var n=1;
　　function example(){
　　　　alert(n);
　　}

   f1(); // 1

{% endhighlight %}

另外一方面，在函數外部天然沒法讀取函數內的局部變量。例如：

{% highlight ruby %}

　　function example(){
　　　　var n=1;
　　}

　　alert(n); // error 報錯

{% endhighlight %}

函數內部聲明變量的時候，必須使用var命令去聲明一個變量。若是不用的話，就會聲明瞭一個全局變量。例如：

{% highlight ruby %}

　function example(){
　　　　n=1;
　　}

　　example();

　　alert(n); // 1

{% endhighlight %}

夾不到菜，怎麼讓大人幫忙？

就比如小孩在飯桌上吃飯，因爲手比較短，只能在本身力所能及的範圍內夾菜，也就是夾本身面前的菜（執行環境）；可是咱們能夠借用閉包（大人幫忙）的方式來夾別的菜。

當咱們須要獲得函數內的局部變量時，正常狀況下，是取不到的，只有經過巧妙的方法去實現。

解決方法：就是在本身的函數內部在定義一個函數E，而後再將函數E的值 return 回去，不就能夠被訪問了。

廢話少說，上菜！！！

{% highlight ruby %}

function example(){

　　　　var n=1;

　　　　function example2(){
　　　　　　alert(n); 
　　　　}
　　　　return example2;
　　}

　　var result=example();

　　result(); // 1

{% endhighlight %}

好像有點明白了，可是怎麼用呢？

閉包不只能夠讀取函數內部的變量，上面也提到了，還能讓這些變量的值始終保持在內存中。

咱們再來看下面這個例子

{% highlight ruby %}

function example1(){

var n=1;

Add=function()
{
n+=1
}

function example2(){
alert(n);
}

return example2;
}

var result=example1();

result(); // 1

Add();

result(); // 2

{% endhighlight %}

上面的代碼中第一個" result(); "執行完之後，輸出結果 "1",第二的" result(); "執行完之後，輸出結果 "2"，這就證實了，函數 example1 中的局部變量n一直保存在內存中，並無在第一個" result(); "執行完之後被自動清除；才能在執行第二個"result(); "完之後，輸出結果 "2"，若是這樣就容易形成咱們平時所說的全局空間污染。

還須要注意的是，上面的 "Add=function(){n+=1}" 這部分代碼，一看這傢伙竟然沒有名字（匿名函數），並且，變量仍是沒經過 var 去命名的，因此呢，就定義成了一個全局變量，因此外部函數固然能夠對它"拳打腳踢"的操做咯；因此就有了"Add();" 執行之後，第二個 "result();"才能實現 n 的累加輸出 "2"。

使用閉包須要注意些什麼

• 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE瀏覽器中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

回收內存方法

{% highlight ruby %}

function example() {  
var n = 1;  
return function(){
alert(n++)
};  
} 

fun();// 1 執行完後 n++，變量n任然存在於內存中

fun = null;// n被回收

{% endhighlight %}

• 閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

嵌套函數的閉包

{% highlight ruby %}

function example() {  

var n = 1;  

return function(){
alert(n++)
};  

} 

var fun = example();  

fun();// 1 執行完後 n++，變量n任然存在於內存中

fun();// 2   

fun = null;// n被回收

{% endhighlight %}

閉包的缺點就是常駐內存，閉包會使變量始終保存在內存中，若是使用不當會增大內存使用量，很容易形成內存泄露。

正常狀況下外部函數是不能訪問內部函數的變量的，可是能夠利用閉包來實現對函數內部變量的訪問。

通常函數執行完畢後，局部活動對象就被銷燬，內存中僅僅保存全局做用域。但閉包的狀況不一樣！

簡而言之，閉包就是內部函數和外部函數鏈接的一座橋樑，（大人就是小孩與飯桌上全部菜的小助手）。

該文章部分知識網絡整理