JavaScript 閉包究竟是什麼

來源:互聯網
上載者:User

用JavaScript一年多了,閉包總是讓人二丈和尚摸不著頭腦。陸陸續續接觸了一些閉包的知識,也犯過幾次因為不理解閉包導致的錯誤,一年多了資料也看了一些,但還是不是非常明白,最近偶然看了一下 jQuery基礎教程 的附錄,發現附錄A對JavaScript的閉包的介紹簡單易懂,於是借花獻佛總結一下。

 

1.簡單的例子

首先從一個經典錯誤談起,頁面上有若干個div, 我們想給它們綁定一個onclick方法,於是有了下面的代碼

<div id="divTest">        <span>0</span> <span>1</span> <span>2</span> <span>3</span>    </div>    <div id="divTest2">        <span>0</span> <span>1</span> <span>2</span> <span>3</span>    </div>
$(document).ready(function() {            var spans = $("#divTest span");            for (var i = 0; i < spans.length; i++) {                spans[i].onclick = function() {                    alert(i);                }            }        });

很簡單的功能可是卻偏偏出錯了,每次alert出的值都是4,簡單的修改就好使了

var spans2 = $("#divTest2 span");        $(document).ready(function() {            for (var i = 0; i < spans2.length; i++) {                (function(num) {                    spans2[i].onclick = function() {                        alert(num);                    }                })(i);            }        });

2.內建函式

讓我們從一些基礎的知識談起,首先瞭解一下內建函式。內建函式就是定義在另一個函數中的函數。例如:

function outerFn () {    functioninnerFn () {}}

innerFn就是一個被包在outerFn範圍中的內建函式。這意味著,在outerFn內部調用innerFn是有效,而在outerFn外部調用innerFn則是無效的。下面代碼會導致一個JavaScript錯誤:

 

function outerFn() {            document.write("Outer function<br/>");            function innerFn() {                document.write("Inner function<br/>");            }        }        innerFn();

不過在outerFn內部調用innerFn,則可以成功運行:

function outerFn() {            document.write("Outer function<br/>");            function innerFn() {                document.write("Inner function<br/>");            }            innerFn();        }        outerFn();

 

 

2.1偉大的逃脫

JavaScript允許開發人員像傳遞任何類型的資料一樣傳遞函數,也就是說,JavaScript中的內建函式能夠逃脫定義他們的外部函數。

逃脫的方式有很多種,例如可以將內建函式指定給一個全域變數:

var globalVar;        function outerFn() {            document.write("Outer function<br/>");                      function innerFn() {                document.write("Inner function<br/>");            }            globalVar = innerFn;        }        outerFn();        globalVar();

 

調用outerFn時會修改全域變數globalVar,這時候它的引用變為innerFn,此後調用globalVar和調用innerFn一樣。這時在outerFn外部直接調用innerFn仍然會導致錯誤,這是因為內建函式雖然通過把引用儲存在全域變數中實現了逃脫,但這個函數的名字依然只存在於outerFn的範圍中。

也可以通過在父函數的傳回值來獲得內建函式引用

function outerFn() {            document.write("Outer function<br/>");            function innerFn() {                document.write("Inner function<br/>");            }            return innerFn;        }        var fnRef = outerFn();        fnRef();

這裡並沒有在outerFn內部修改全域變數,而是從outerFn中返回了一個對innerFn的引用。通過調用outerFn能夠獲得這個引用,而且這個引用可以可以儲存在變數中。

 

這種即使離開函數範圍的情況下仍然能夠通過引用調用內建函式的事實,意味著只要存在調用內建函式的可能,JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內建函式的所有變數,直到最後一個變數廢棄,JavaScript的垃圾收集器才能釋放相應的記憶體空間(紅色部分是理解閉包的關鍵)。

 

說了半天總算和閉包有關係了,閉包是指有許可權訪問另一個函數範圍的變數的函數,建立閉包的常見方式就是在一個函數內部建立另一個函數,就是我們上面說的內建函式,所以剛才說的不是廢話,也是閉包相關的 ^_^

 

1.2變數的範圍

內建函式也可以有自己的變數,這些變數都被限制在內建函式的範圍中:

function outerFn() {            document.write("Outer function<br/>");            function innerFn() {                var innerVar = 0;                innerVar++;                document.write("Inner function\t");                document.write("innerVar = "+innerVar+"<br/>");            }            return innerFn;        }        var fnRef = outerFn();        fnRef();        fnRef();        var fnRef2 = outerFn();        fnRef2();        fnRef2();

 

每當通過引用或其它方式調用這個內建函式時,就會建立一個新的innerVar變數,然後加1,最後顯示

Outer functionInner function    innerVar = 1Inner function    innerVar = 1Outer functionInner function    innerVar = 1Inner function    innerVar = 1

 

內建函式也可以像其他函數一樣引用全域變數:

var globalVar = 0;        function outerFn() {            document.write("Outer function<br/>");            function innerFn() {                globalVar++;                document.write("Inner function\t");                document.write("globalVar = " + globalVar + "<br/>");            }            return innerFn;        }        var fnRef = outerFn();        fnRef();        fnRef();        var fnRef2 = outerFn();        fnRef2();        fnRef2();

 

現在每次調用內建函式都會持續地遞增這個全域變數的值:

Outer functionInner function    globalVar = 1Inner function    globalVar = 2Outer functionInner function    globalVar = 3Inner function    globalVar = 4

 

 

但是如果這個變數是父函數的局部變數又會怎樣呢?因為內建函式會引用到父函數的範圍(有興趣可以瞭解一下範圍鏈和使用中的物件的知識),內建函式也可以引用到這些變數

function outerFn() {            var outerVar = 0;            document.write("Outer function<br/>");            function innerFn() {                outerVar++;                document.write("Inner function\t");                document.write("outerVar = " + outerVar + "<br/>");            }            return innerFn;        }        var fnRef = outerFn();        fnRef();        fnRef();        var fnRef2 = outerFn();        fnRef2();        fnRef2();

 

這一次結果非常有意思,也許或出乎我們的意料

Outer functionInner function    outerVar = 1Inner function    outerVar = 2Outer functionInner function    outerVar = 1Inner function    outerVar = 2

我們看到的是前面兩種情況合成的效果,通過每個引用調用innerFn都會獨立的遞增outerVar。也就是說第二次調用outerFn沒有繼續沿用outerVar的值,而是在第二次函數調用的範圍建立並綁定了一個一個新的outerVar執行個體,兩個計數器完全無關。

當內建函式在定義它的範圍的外部被引用時,就建立了該內建函式的一個閉包。這種情況下我們稱既不是內建函式局部變數,也不是其參數的變數為自由變數,稱外部函數的調用環境為封閉閉包的環境。從本質上講,如果內建函式引用了位於外部函數中的變數,相當於授權該變數能夠被延遲使用。因此,當外部函數調用完成後,這些變數的記憶體不會被釋放(最後的值會儲存),閉包仍然需要使用它們。

 

3.閉包之間的互動

當存在多個內建函式時,很可能出現意料之外的閉包。我們定義一個遞增函數,這個函數的增量為2

function outerFn() {            var outerVar = 0;            document.write("Outer function<br/>");            function innerFn1() {                outerVar++;                document.write("Inner function 1\t");                document.write("outerVar = " + outerVar + "<br/>");            }            function innerFn2() {                outerVar += 2;                document.write("Inner function 2\t");                document.write("outerVar = " + outerVar + "<br/>");            }            return { "fn1": innerFn1, "fn2": innerFn2 };        }        var fnRef = outerFn();        fnRef.fn1();        fnRef.fn2();        fnRef.fn1();        var fnRef2 = outerFn();        fnRef2.fn1();        fnRef2.fn2();        fnRef2.fn1();

我們映射返回兩個內建函式的引用,可以通過返回的引用調用任一個內建函式,結果:

Outer functionInner function 1    outerVar = 1Inner function 2    outerVar = 3Inner function 1    outerVar = 4Outer functionInner function 1    outerVar = 1Inner function 2    outerVar = 3Inner function 1    outerVar = 4

 

innerFn1和innerFn2引用了同一個局部變數,因此他們共用一個封閉環境。當innerFn1為outerVar遞增一時,久違innerFn2設定了outerVar的新的起點值,反之亦然。我們也看到對outerFn的後續調用還會建立這些閉包的新執行個體,同時也會建立新的封閉環境,本質上是建立了一個新對象,自由變數就是這個對象的執行個體變數,而閉包就是這個對象的執行個體方法,而且這些變數也是私人的,因為不能在封裝它們的範圍外部直接引用這些變數,從而確保了了物件導向資料的專有性。

 

3.解惑

現在我們可以回頭看看開頭寫的例子就很容易明白為什麼第一種寫法每次都會alert 4了。

for (var i = 0; i < spans.length; i++) {           spans[i].onclick = function() {               alert(i);           }       }

 

上面代碼在頁面載入後就會執行,當i的值為4的時候,判斷條件不成立,for迴圈執行完畢,但是因為每個span的onclick方法這時候為內建函式,所以i被閉包引用,記憶體不能被銷毀,i的值會一直保持4,直到程式改變它或者所有的onclick函數銷毀(主動把函數賦為null或者頁面卸載)時才會被回收。這樣每次我們點擊span的時候,onclick函數會尋找i的值(範圍鏈是引用方式),一查等於4,然後就alert給我們了。而第二種方式是使用了一個立即執行的函數又建立了一層閉包,函式宣告放在括弧內就變成了運算式,後面再加上括弧括弧就是調用了,這時候把i當參數傳入,函數立即執行,num儲存每次i的值。

這一通下來想必大家也和我一樣,對閉包有所瞭解了吧,當然完全瞭解的話需要把函數的執行環境和範圍鏈搞清楚 ^_^

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.