DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中閉包之淺析解讀(必看篇)
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中閉包之淺析解讀(必看篇)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved