學習Javascript閉包（Closure）及幾個經典面試題理解

今天遇到一個面試題，結果讓我百思不得其解。后來在查閱了各種文檔后，理清了來龍去脈。讓我們先來看看這道題：

function Foo( ){
　　var i = 0;
　　return function( ){
　　　　console.log(i++);
　　}
}
var f1 = Foo( ),f2 = Foo( );
f1( );
f1( );
f2( );

大眼一看，我的答案是0,0,0。因為無論怎么調用 i 都被初始化為0了啊！然而正確的答案是0,1,0。其實這道題考察的是閉包和++i和i++的區別：

　　當調用Foo()函數時，返回的是第三行的匿名函數，即 var f1=function(){console.log(i++)}; 所以調用 f1() 時，即相當於調用匿名函數返回打印的值。

　　匿名函數在Foo()函數的內部，所以可以調用變量var i=0;即第一次f1()打印出 0；此時再++（++在后表示先執行再++），即變量 i =1被始終保持在內存中；這也就是第二次調用f1()時，返回1的原因。

　　這里用到的就是閉包的兩大用處：可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。

看到這里你可能還對閉包產生不解，接下來我們就來了解一下閉包：

閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應用都要依靠閉包實現。　　

一、變量的作用域

　　要理解閉包，首先必須理解Javascript特殊的變量作用域。

　　變量的作用域無非就是兩種：全局變量和局部變量。

　　Javascript語言的特殊之處，就在於函數內部可以直接讀取全局變量。

var n=999;

function f1(){
　　alert(n);
}

f1(); // 999

　　另一方面，在函數外部自然無法讀取函數內的局部變量。

function f1(){
　　var n=999;
}

alert(n); // error

　　這里有一個地方需要注意，函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！

function f1(){
　　n=999;
}

f1();

alert(n); // 999

二、如何從外部讀取局部變量？

　　出於種種原因，我們有時候需要得到函數內的局部變量。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。

　　那就是在函數的內部，再定義一個函數。

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); // 999
　　}

}　

　　在上面的代碼中，函數f2就被包括在函數f1內部，這時f1內部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內部的局部變量，對f1就是不可見的。這就是Javascript語言特有的"鏈式作用域"結構（chain scope），子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。

　　既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，我們不就可以在f1外部讀取它的內部變量了嗎！　

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); 
　　}

　　return f2;

}

var result=f1();

result(); // 999

三、閉包的概念

　　上一節代碼中的f2函數，就是閉包。

　　各種專業文獻上的"閉包"（closure）定義非常抽象，很難看懂。我的理解是，閉包就是能夠讀取其他函數內部變量的函數。

　　由於在Javascript語言中，只有函數內部的子函數才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個函數內部的函數"。

　　所以，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。

四、閉包的用途

　　閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。

　　怎么來理解這句話呢？請看下面的代碼。　

function f1(){

　　var n=999;

　　nAdd=function(){n+=1}

　　function f2(){
　　　　alert(n);
　　}

　　return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000　

　　在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數f1中的局部變量n一直保存在內存中，並沒有在f1調用后被自動清除。

　　為什么會這樣呢？原因就在於f1是f2的父函數，而f2被賦給了一個全局變量，這導致f2始終在內存中，而f2的存在依賴於f1，因此f1也始終在內存中，不會在調用結束后，被垃圾回收機制（garbage collection）回收。

　　這段代碼中另一個值得注意的地方，就是"nAdd=function(){n+=1}"這一行，首先在nAdd前面沒有使用var關鍵字，因此nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數（anonymous function），而這個匿名函數本身也是一個閉包，所以nAdd相當於是一個setter，可以在函數外部對函數內部的局部變量進行操作。

五、使用閉包的注意點

　　1）由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。

　　2）閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。

 

學習完以上關於閉包的知識后，我們再來看下幾個經典關於閉包應用的面試題，如果你能理解下面代碼的運行結果，應該就算理解閉包的運行機制了。

代碼片段一。

var name = "The Window";

var object = {
　　name : "My Object",

　　getNameFunc : function(){
　　　　return function(){
　　　　　　return this.name;
　　　　};

　　}

};

alert(object.getNameFunc()());  //The Window

代碼片段二。

var name = "The Window";

var object = {
　　name : "My Object",

　　getNameFunc : function(){
　　　　var that = this; //這里的this指代的就是object本身了。
　　　　return function(){
　　　　　　return that.name;
　　　　};

　　}

};

alert(object.getNameFunc()());  //My Object

理解：在 JavaScript 中，一個函數的上下文環境，也就是this關鍵詞所引用對象，是依賴於函數是如何被調用的，而不是依賴於函數如何被定義的。

代碼片段一中 object.getNameFunc()() 可以寫成window.object.getNameFunc()，所以this指向的是全局的window即 var name = "The Window";

而代碼片段二中 var that = this;改變了this的指向，此時this指向的是object.name。

代碼片段三：

var fullname = 'John Doe';

var obj = {
    fullname: 'Colin Ihrig',

    prop: {
        fullname: 'Aurelio De Rosa',

        getFullname: function() {
            return this.fullname;
        }

    }
};
（1）console.log(obj.prop.getFullname()); //注意和代碼片段一的obj.prop.getFullname()()區分

（2）var test = obj.prop.getFullname; // 可以寫成window.obj.prop.getFullname console.log(test());

理解：上面的代碼打印出Aurelio De Rosa和John Doe。原因同樣是在 JavaScript 中，一個函數的上下文環境，也就是this關鍵詞所引用對象，是依賴於函數是如何被調用的，而不是依賴於函數如何被定義的。

在第一個console.log()調用中， getFullname()是作為obj.prop的函數被調用的。因此，這里的上下文環境指向后者並且函數返回this對象的 fullname屬性。相反，當 getFullname() 被賦為test變量的值時，那個語境指向全局對象(window)。這是因為，test被隱式設置為全局對象的屬性。因此，函數調用返回window的fullname屬性值，在此段代碼中，這個值是通過第一行賦值語句設置的。

代碼片段四：

(function(){  
   var result=[];  
   for(var i=0;i<10;i++){  
       result[i]=function(){  
           return i;  
                
       }  
   }  
   alert(result[1]());  //10
　　alert(result[2]());  //10

})(); 

 理解：上面這段代碼創建了10個閉包，並將它們存儲到一個數組中。這些閉包都是在同一個函數調用中定義的，因此它們可以共享變量 i 。當return[i]返回時，變量 i 的值是10，所有的閉包都共享這一個值，因此，數組中的函數的返回值都是同一個值。這不是我們想要的結果。其實，我們一開始是可以像下面這樣做的，這段代碼利用循環創建了很多個閉包，就犯了一個錯誤，試圖將循環代碼移入定義這個閉包的函數之內（函數的執行依賴於變量的作用域，這個作用域是在函數定義時決定的，而不是函數調用時決定的）：

function constfun(v){return function(){return v;}}

(function(){

　　var result=[];

　　for(var i=0;i<10;i++){

　　　　result[i]=constfun(i);
　　}

　　console.log(result[1]()); // 1
　　console.log(result[2]()); // 2

})()

 還有一種寫法就是：

(function(){  
   var result=[];  
   for(var i=0;i<10;i++){  
       result[i]=(function(){return i;})(i);
   }  
    return result;
})(); 
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

那這和代碼片段四有什么區別呢？首先，這兩個都是閉包（占用函數外部的變量，是變量無法消除）。

代碼片段四，i永遠都是那個i(相當於一個指針)，存入result數組里面的值其實就是指針i,指向的那個具體的值也是同一個，隨着循環不斷在變化，循環完成了，值定下來了（等於10），數組里裝的值也就定下來了（全部是10）。

這種寫法呢呢，是借用立即執行函數。(function(){})(i);立即執行函數是把i作為參數傳到函數里面。

這個好處是這樣的：參數是按值傳遞，這樣函數獲得的i就不是一個指針了，而是i的一個副本。那么，數組里面的各個值（函數執行后返回得值）就毫無瓜葛，你是你，我是我。