閉包用法結合例項詳解

admin發表於2017-03-28

在javascript中，閉包是一個很重要的概念，對於新手來說是一個不大不小的障礙，當然這個障礙也不大，通常情況下都能夠衝過去，下面就結合程式碼例項介紹一下它的相關概念和基本用法，希望能夠給需要的朋友帶來幫助。

一.基本介紹:

閉包我們可以認為是函式執行完畢，但是相關變數仍然駐留記憶體沒有釋放的一種現象。

它的主要特徵如下:

1.函式中巢狀函式。

2.函式的內部可以引用外部的引數和變數。

3.被引用的引數和變數不會被垃圾回收機制回收。

二.閉包的建立:

最為常見的一種方式，就是函式內部巢狀有一個函式，當外層函式執行完畢之後，內部的函式依然可以使用定義在外層函式的區域性變數，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function func(){   
  var num = 1; 
  return function(){
    console.log(num++)
  }; 
}     
var count = func(); 
count();
count();
fun=null;

雖然函式func()執行完畢，但是它內部的區域性變數num並沒有被銷燬，依然可以被內部函式使用，這就是一個閉包。

閉包的優點就是可以將區域性變數駐留在記憶體中，而不用使用全域性變數，當然這也是一個缺點，如果使用不當會造成記憶體的損耗。

js垃圾回收原理:

1.如果一個物件不再被引用的話，那麼它會將被GC回收。

2.儘管兩個物件相互引用，但是如果不再被第三個物件引用的話，那麼相互引用的物件也會被GC回收。

三.閉包的優點:

當然使用好處是有很多的，下面做一下簡單介紹:

例項一:

[JavaScript] 純文字檢視 複製程式碼
function func(){ 
  var num = 1; 
  return function(){
    console.log(num++)
  }; 
}     
var count = func(); 
count();
count();
fun=null;

這個程式碼其實就是文章開始部分的程式碼，可以是區域性變數駐留記憶體，避免使用全域性變數。

例項二:

[JavaScript] 純文字檢視 複製程式碼
var obj=(function(){
  var num=1;
  function oneFunc(){
    num++;
    console.log(num);
  }
  function twoFunc(){
    num++;
    console.log(num);
  }
  return{
    b:oneFunc,
    c:twoFunc
  }
})();
obj.b();
obj.c()

上面程式碼同樣也是利用記憶體駐留的原理，只是使用的形式不同而已。

例項三:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var oshow=document.getElementById("show");
  var lis=document.getElementsByTagName('li');
  for(var index=0;index<lis.length;index++){
    (function(index){
      lis[index].onclick=function(){
        oshow.innerHTML=index
      };
    })(index);
  }
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
</body>
</html>

上面是一個批量註冊事件處理函式的程式碼，點選每一個li元素會獲取當前li的索引，可能很多朋友認為上面的程式碼太過複雜了，使用如下程式碼即可實現:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var oshow=document.getElementById("show");
  var lis=document.getElementsByTagName('li');
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=function(){
      oshow.innerHTML=index
    };
  }
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
</body>
</html>

測試結果卻不盡如人意，這是因為當註冊完時間處理函式以後，index的值變為3。而在上一個程式碼中，index通過匿名函式傳遞進來以後，就會變成一個匿名函式的區域性變數，然後作為oshow.innerHTML的值，這個index已經和外部的index脫離了必然的關係。

相關文章