Javascript 深入理解閉包

Corwien 發布于2019-08-22 10:46 / 460人閱讀

摘要：要理解閉包，首先得理解作用域。作用域主要分為兩種全局變量和局部變量。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。但閉包的情況不同簡而言之，閉包就是內部函數和外部函數連接的一座橋梁，大人就是小孩與飯桌上所有菜的小助手。

閉包（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 %}

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

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

一般函數執行完畢后，局部活動對象就被銷毀，內存中僅僅保存全局作用域。但閉包的情況不同！

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

該文章部分知識網絡整理

GPU云服務器云服務器深入理解javascript js閉包的理解深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91234.html

【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
到底什么是閉包？深入理解javascript閉包

摘要：如何使用閉包所以這時候我們就要用閉包去解決這個問題了，先看代碼。計數器為這時候的就形成了一個閉包。一個閉包由兩部分組成，函數和創建該函數的環境。就是創建了一個匿名函數調用函數解除對匿名函數的引用，以便釋放內存古老定義閉包(closure)，是指函數變量可以保存在函數作用域內，因此看起來是函數將變量包裹了起來。 //根據定義，包含變量的函數就是閉包 function foo() { ...

figofuture 2019-08-23 10:59 評論0 收藏0
【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0
深入理解 Javascript 之閉包

摘要：閉包一認識閉包閉包是一種特殊的對象。它由兩部分構成函數，以及創建該函數的環境包含自由變量。環境由閉包創建時在作用域中的任何局部變量組成。創建閉包最常見方式，就是在一個函數內部創建另一個函數。閉包 showImg(https://segmentfault.com/img/bVbe3nk?w=1335&h=653); 一、認識閉包閉包是一種特殊的對象。它由兩部分構成：函數，以及創建該函...

everfly 2019-08-23 10:51 評論0 收藏0
深入理解JavaScript (5) —— 閉包

摘要：以上是從作用域的角度對閉包的理解，我們還可以結合執行上下文棧來理解閉包。這就是需要理解閉包的核心內容。即，執行到第行時，全局上下文環境將變為活動狀態，但是上下文環境依然會在執行上下文棧中。理解了上下文環境、作用域、作用域鏈以及自由變量，我們再來聊聊閉包。我們不急于給出閉包的概念，先從應用閉包的兩種情況 —— 1.函數作為返回值，2.函數作為參數被傳遞 —— 來直觀的認識它。第一，...

longmon 2019-08-22 11:04 評論0 收藏0