JavaScript中閉包之淺析解讀(必看篇)_javascript技巧

JavaScript中的閉包真心是一個老生常談的問題了，最近面試也是一直問到，我自己的表述能力又不能完全支撐起來，真是抓狂。在回來的路上，我突然想到了一個很簡單的事情，其實我們在做項目時候，其實就經常用到閉包的，可是面試問的時候，回答又往往是我們經常搜到的答案，唉 不管是應付面試 還是真的想學點東西 ，我也用自己的理解跟大家分享一下，書面化就避免不了了的。

1.閉包是什嗎？

紅寶書中曰：“是指有權訪問另外一個函數範圍中的變數的函數。”

簡單的說，JavaScript允許使用內建函式---即函數定義和函數運算式位於另一個函數的函數體內。而且，這些內建函式可以訪問它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內建函式。當其中一個這樣的內建函式在包含它們的外部函數之外被調用時，就會形成閉包。再通俗的說就是“一個函數內部建立另外一個函數，後面這個函數可以讀取上面那個函數中的變數，後面這個函數就可以稱作‘閉包'”。

2.閉包有啥用？

通過我大量的查閱，如果說“通過使用閉包，我們可以做很多事情。比如類比物件導向的代碼風格；更優雅，更簡潔的表達出代碼；在某些方面提升代碼的執行效率”，會不會感覺很空洞，那這些會不會好一些，由於在JavaScript中沒有真正的塊級範圍，但是為了給某個函式宣告一些只有該函數才能使用的局部變數時，我們就會用到閉包，這樣我們可以很大程度上減少全域範圍中的變數，淨化全域範圍。

下面舉例說明一下：

1.匿名自執行函數

我們知道所有的變數，如果不加上var關鍵字，則預設的會添加到全域對象的屬性上去，這樣的臨時變數加入全域對象有很多壞處，

比如：別的函數可能誤用這些變數；造成全域對象過於龐大，影響訪問速度(因為變數的取值是需要從原型鏈上遍曆的)。

了每次使用變數都是用var關鍵字外，我們在實際情況下經常遇到這樣一種情況，即有的函數只需要執行一次，其內部變數無需維護，

比如UI的初始化，那麼我們可以使用閉包：

var data= {    table : [],    tree : {}  };     (function(dm){    for(var i = 0; i < dm.table.rows; i++){      var row = dm.table.rows[i];      for(var j = 0; j < row.cells; i++){        drawCell(i, j);      }    }      })(data);

我們建立了一個匿名的函數，並立即執行它，由於外部無法引用它內部的變數，因此在函數執行完後會立刻釋放資源，關鍵是不汙染全域對象。

2.結果緩衝

我們開發中會碰到很多情況，設想我們有一個處理過程很耗時的函數對象，每次調用都會花費很長時間，那麼我們就需要將計算出來的值儲存起來，當調用這個函數的時候，首先在緩衝中尋找，如果找不到，則進行計算，然後更新緩衝並傳回值，如果找到了，直接返回尋找到的值即可。閉包正是可以做到這一點，因為它不會釋放外部的引用，從而函數內部的值可以得以保留。

var CachedSearchBox = (function(){    var cache = {},      count = [];    return {      attachSearchBox : function(dsid){        if(dsid in cache){//如果結果在緩衝中         return cache[dsid];//直接返回緩衝中的對象        }        var fsb = new uikit.webctrl.SearchBox(dsid);//建立        cache[dsid] = fsb;//更新緩衝        if(count.length > 100){//保正緩衝的大小<=100         delete cache[count.shift()];        }        return fsb;         },         clearSearchBox : function(dsid){        if(dsid in cache){         cache[dsid].clearSelection();         }      }    };  })();     CachedSearchBox.attachSearchBox("input");

這樣我們在第二次調用的時候，就會從緩衝中讀取到該對象。

3.封裝

var person = function(){    //變數範圍為函數內部，外部無法訪問    var name = "default";          return {      getName : function(){        return name;      },      setName : function(newName){        name = newName;      }    }  }();     print(person.name);//直接存取，結果為undefined  print(person.getName());  person.setName("abruzzi");  print(person.getName());

4.實作類別和繼承

function Person(){    var name = "default";          return {      getName : function(){        return name;      },      setName : function(newName){        name = newName;      }    }    };     var p = new Person();  p.setName("Tom");  alert(p.getName());   var Jack = function(){};  //繼承自Person  Jack.prototype = new Person();  //添加私人方法  Jack.prototype.Say = function(){    alert("Hello,my name is Jack");  };  var j = new Jack();  j.setName("Jack");  j.Say();  alert(j.getName());

寫到最後，不知道最後各位親們發現  自己曾經做過的項目中其實用到過很多這種，反正我是遇到了，閉包就是這麼一直存在著的。

關於閉包，雖然老生常談，但是還是挺重要的。至於閉包的缺陷嘛，就說一個好了 不是乾貨  濫用閉包 ，會導致記憶體流失，記憶體流失是啥 自己百度吧 ^_^。

以上這篇JavaScript中閉包之淺析解讀(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。