【javascript基礎】八、閉包

前言

函數和做用域啥的咱們前面已經瞭解了，如今就要學習閉包了，這是一個挺晦澀的知識點，初學者可能會感受很差理解，可是高手都不不覺得然了，高手就給我提點意見吧，我和新手一塊兒來學習什麼是閉包。

例子

先不說定義，先看一個題，看看你們能得出正確的結果不，

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
        arr[i] = function(){
            return i;
        }
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是多少？
console.log(fns[0]());//值是多少？

結果就是

10
10

View Code

你作對了嗎？

 

什麼是閉包

咱們知道，javascript中的變量做用域分爲全局變量和局部變量，全局的變量咱們在什麼地方均可以使用，可是局部變量就不是這樣的了，咱們只能在該變量的做用域中獲得，換句話說就是咱們在函數的內部可使用函數外部的變量，可是咱們在函數的外部卻不能使用函數內部定義的局部變量，可是在實際中咱們就是想要在函數的外部使用函數內部定義的變量那該怎麼辦呢?例子來了

function test(){
  var inner = 10;
}
alert(inner);//error?咋辦

咋辦呢？咱們知道，在內部咱們能夠訪問到這個變量，咱們還知道有一個操做符return能夠返回想要的值，那我就在內部定義一個函數來訪問這個變量，而後在返回這個函數不就好了，實踐一下

function test(){
  var inner = 10;
  function inFun(){
    alert(inner);//
  };
   return inFun;
}
var outter = test();
outter();//10; 

咱們作到了，爲本身鼓鼓掌，有時候咱們就該不斷鼓勵本身一下，不要給本身太大的壓力，咱們不是富二代，在不鼓勵一下本身怎麼能成爲富二代他爹呢。

這就是閉包了，官方沒有給出閉包一個完整的準確的定義，民間流傳的是在一個函數內定義一個函數，而且這個內部函數能夠在外面訪問，這時候就造成了閉包。看看上面函數的結構，一個函數返回了一個內部函數，咱們知道在正常狀況下，一個函數執行結束以後，裏面的變量會被釋放，也就是說，在test()這句執行以後，裏面的inner應該被釋放了纔對，可是咱們發現，outter()時咱們拿到了inner的值，這就是閉包的特性：若是閉包中使用了局部的變量，那麼這個變量會一直貯存在內存中，閉包會一直保持這個值，一直到外部的函數沒有被引用爲止，看例子

function closure(){
  var num = 0;
  function add(){
    console.log(++num);
  }
  return add;  
}
var test1  = closure();//造成一個閉包，保持着本身的一個num變量
test1  ();//1
test1  ();//2
var test2 = closure();//又一個閉包，保持了一個本身的num變量
test2 ();//1
test2 ();//2

好玩不？這就是閉包的神奇的地方，也是讓身爲初學者的咱們感到彷徨的地方，相信我，我會讓大家理解明白的。要想釋放num佔用的內存，就該這樣

test1 = null;
test2 = null;

簡單解析下這個例子：在執行 var test1 = closure()時，因爲closure()返回到是一個函數，這裏就至關於test1變量指向了一個函數add，可是這個add函數有本身的做用域和活動對象，都存在了test1中，執行test1()時，會尋找num變量，因爲閉包存儲了該變量就能夠直接取到，而且自加1，再一次執行test1()時會繼續在test1執行的add函數的執行環境和做用域中查找，發現num爲1了，就找到了這個num；在執行var test2 = closure()時，會從新建立一個閉包，從新存儲執行環境和活動對象，因此這是和第一次徹底沒有關係的。

閉包的機制

1. 函數也是對象，有[[scope]]屬性（只能經過JavaScript引擎訪問），指向函數定義時的執行環境上下文。

2. 假如A是全局的函數，B是A的內部函數。執行A函數時，當前執行環境的上下文指向一個做用域鏈。做用域鏈的第一個對象是當前函數的活動對象（this、參數、局部變量），第二個對象是全局window。

3. 當執行代碼運行到B定義地方， 設置函數B的[[scope]]屬性指向執行環境的上下文做用域鏈。

4. 執行A函數完畢後，若內部函數B的引用沒外暴，A函數活動對象將被Js垃圾回收處理；反之，則維持，造成閉包。

5. 調用函數B時，JavaScript引擎將當前執行環境入棧，生成新的執行環境，新的執行環境的上下文指向一個做用域鏈，由當前活動對象+函數B的[[scope]]組成，鏈的第一個對象是當前函數的活動對象（this、參數、局部變量組成），第二個活動對象是A函數產生的，第三個window。

6. B函數裏面訪問一個變量，要進行標誌符解析（JavaScript原型也有標識符解析），它從當前上下文指向的做用域鏈的第一個對象開始查找，找不到就查找第二個對象，直到找到相關值就當即返回，若是還沒找到，報undefined錯誤。

7. 當有關A函數的外暴的內部引用所有被消除時，A的活動對象才被銷燬。

這段是其餘的地方的，就是說了執行環境和做用域的理解閉包怎麼維持變量的。

閉包的應用

一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中，這既是函數也是弊端。咱們能夠利用閉包封裝一些私有的屬性，例如

var factorial = (function () {
    var cache = [];
    return function (num) {
        if (!cache[num]) {
            if (num == 0) {
                cache[num] = 1;
            }
            cache[num] = num * factorial(num - 1);
        }
        return cache[num];
    }
})();

封裝了一個內部私有的屬性來緩存結果。

下面流行的模塊模式，它容許你模擬公共，私有以及特權成員

var Module = (function(){
    var privateProperty = 'foo';

    function privateMethod(args){
        //do something
    }

    return {

        publicProperty: "",

        publicMethod: function(args){
            //do something
        },

        privilegedMethod: function(args){
            privateMethod(args);
        }
    }
})();

另外一個類型的閉包叫作當即執行函數表達式，是一個在window上下文中自我調用的匿名函數：

(function(window){

    var a = 'foo';

    function private(){
        // do something
    }

    window.Module = {

        public: function(){
            // do something 
        }
    };

})(this);

 

閉包的弊端

因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

解釋例子

回到開始的例子，這是閉包的經典的例子，這個和其餘的例子和有些不同，咱們分析一下，這裏用了一個數組，其實這裏咱們執行一次var fns = test()，造成了10個閉包，數組的每個項存了一個閉包，這與其餘的例子是不同的，其餘的例子是函數執行一次造成了一個閉包，因此這個10個閉包的初始的執行環境是同樣的，每個閉包使用了i這個變量，這個變量在函數var fns = test()執行以後變爲了退出循環的那個i的值10，JavaScript是解釋型的語言，因此在執行數組中的閉包的時，會找到此時i的值10;看看arr的結果

如今想怎樣解決這個問題呢？咱們想一想，這10個閉包造成時的執行環境和活動對象是同樣的，如今考慮的就是要在初始時就不同，咱們知道函數的做用域是一層一層的，那咱們就須要在這之間家一層做用域，這層做用域要有不一樣的i的值，咱們想到了自執行匿名函數，(funciton(){})()，咱們把i的值穿進去，按值傳參就是至關於複製了一份變量嘛，在(funciton(){})()外部的做用域中的i的值的改變不會改變內部的i的值，試一下

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
      (function(i){ arr[i] = function(){return i;}})(i);
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是9
console.log(fns[0]());//值是0            

固然也能夠這樣

function test(){
    var arr = [];
    for(var i = 0;i<10;i++){
     
    arr[i] = (function(i){return function(){return i}})(i);
    }
    return arr;
}

var fns = test();
console.log(fns[9]()); // 值是9
console.log(fns[0]());//值是0 

這兩個的實質都是在閉包造成以前，給每個閉包包上一層做用域，在這個做用域中傳一個參數，是每個閉包上一級的做用域中都有不一樣的i。固然還有其餘的辦法這裏不說了。

小結

閉包的應用場景挺多的，在模塊化編程中很重要的，有些地方說函數也是閉包，仍是那就話，概念不重要，理解會用纔是最現實的。