深入淺出Javascript閉包

一、引子

閉包（closure）是 Javascript 語言的一個難點，面試時常被問及，也是它的特色，很多高級應用都要依靠閉包實作，本文盡可能用簡單易懂的話，講清楚閉包的概念、形成條件及其常見的面試題，

我們先來看一個例子：

var n = 999;
function f1() {
console.log(n);
}
f1() // 999

上面代碼中，函式f1可以讀取全域變數n，但是，函式外部無法讀取函式內部宣告的變數，

function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined

上面代碼中，函式f1內部宣告的變數n，函式外是無法讀取的，

如果有時需要得到函式內的區域變數，正常情況下，這是辦不到的，只有通過變通方法才能實作，那就是在函式的內部，再定義一個函式，

function f1() {
var n = 999;
function f2() {
  console.log(n); // 999
 }
}

上面代碼中，函式f2就在函式f1內部，這時f1內部的所有區域變數，對f2都是可見的，既然f2可以讀取f1的區域變數，那么只要把f2作為回傳值，我們不就可以在f1外部讀取它的內部變數了嗎！

二、閉包是什么

我們可以對上面代碼進行如下修改：

   function f1(){
   var a = 999;
   function f2(){
    console.log(a);
   }
   return f2; // f1回傳了f2的參考
   }
   var result = f1(); // result就是f2函式了
   result();  // 執行result，全域作用域下沒有a的定義，
         //但是函式閉包，能夠把定義函式的時候的作用域一起記住，輸出999			

上面代碼中，函式f1的回傳值就是函式f2，由于f2可以讀取f1的內部變數，所以就可以在外部獲得f1的內部變數了，

閉包就是函式f2，即能夠讀取其他函式內部變數的函式，由于在JavaScript語言中，只有函式內部的子函式才能讀取內部變數，因此可以把閉包簡單理解成“定義在一個函式內部的函式”，閉包最大的特點，就是它可以“記住”誕生的環境，比如f2記住了它誕生的環境f1，所以從f2可以得到f1的內部變數，在本質上，閉包就是將函式內部和函式外部連接起來的一座橋梁，

那到底什么是閉包呢？

當函式可以記住并訪問所在的詞法作用域，即使函式是在當前詞法作用域之外執行，這就產生了閉包， ----《你不知道的Javascript上卷》

我個人理解，閉包就是函式中的函式(其他語言不能函式再套函式),里面的函式可以訪問外面函式的變數，外面的變數的是這個內部函式的一部分，

閉包形成的條件

• 函式嵌套
• 內部函式參考外部函式的區域變數

三、閉包的特性

每個函式都是閉包，每個函式天生都能夠記憶自己定義時所處的作用域環境，把一個函式從它定義的那個作用域，挪走，運行，這個函式居然能夠記憶住定義時的那個作用域，不管函式走到哪里，定義時的作用域就帶到了哪里，接下來我們用兩個例子來說明這個問題：

//例題1
var inner;
function outer(){
var a=250;
inner=function(){
alert(a);//這個函式雖然在外面執行，但能夠記憶住定義時的那個作用域，a是250
  }
}
outer();
var a=300;
inner();//一個函式在執行的時候，找閉包里面的變數，不會理會當前作用域，

//例題2
function outer(x){
  function inner(y){
  console.log(x+y);
  }
return inner;
}
var inn=outer(3);//數字3傳入outer函式后，inner函式中x便會記住這個值
inn(5);//當inner函式再傳入5的時候，只會對y賦值，所以最后彈出8

四、閉包的記憶體泄漏

堆疊記憶體提供一個執行環境，即作用域，包括全域作用域和私有作用域,那他們什么時候釋放記憶體的？

• 全域作用域----只有當頁面關閉的時候全域作用域才會銷毀
• 私有的作用域----只有函式執行才會產生

一般情況下，函式執行會形成一個新的私有的作用域，當私有作用域中的代碼執行完成后，我們當前作用域都會主動的進行釋放和銷毀，但當遇到函式執行回傳了一個參考資料型別的值，并且在函式的外面被一個其他的東西給接收了，這種情況下一般形成的私有作用域都不會銷毀，

如下面這種情況：

function fn(){
var num=100;
return function(){
  }
}
var f=fn();//fn執行形成的這個私有的作用域就不能再銷毀了

也就是像上面這段代碼，fn函式內部的私有作用域會被一直占用的，發生了記憶體泄漏，所謂記憶體泄漏指任何物件在您不再擁有或需要它之后仍然存在，閉包不能濫用，否則會導致記憶體泄露，影響網頁的性能，閉包使用完了后，要立即釋放資源，將參考變數指向null，

接下來我們看下有關于記憶體泄漏的一道經典面試題：

  function outer(){
  var num=0;//內部變數
  return function add(){//通過return回傳add函式，就可以在outer函式外訪問了
  num++;//內部函式有參考，作為add函式的一部分了
  console.log(num);
  };
 }
  var func1=outer();
  func1();//實際上是呼叫add函式， 輸出1
  func1();//輸出2 因為outer函式內部的私有作用域會一直被占用
  var func2=outer();
  func2();// 輸出1  每次重新參考函式的時候，閉包是全新的，
  func2();// 輸出2  

五、閉包的作用

1.可以讀取函式內部的變數，

2.可以使變數的值長期保存在記憶體中，生命周期比較長，因此不能濫用閉包，否則會造成網頁的性能問題

3.可以用來實作JS模塊，

JS模塊:具有特定功能的js檔案,將所有的資料和功能都封裝在一個函式內部(私有的),只向外暴露一個包信n個方法的物件或函式,模塊的使用者,只需要通過模塊暴露的物件呼叫方法來實作對應的功能，

具體請看下面的例子:

//index.html檔案
<script type="text/javascript" src="https://www.cnblogs.com/xzsj/p/myModule.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>

//myModule.js檔案
(function () {
  var msg = 'Beijing'//私有資料
  //操作資料的函式
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
  //向外暴露物件(給外部使用的兩個方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()

六、閉包的運用

我們要實作這樣的一個需求: 點擊某個按鈕, 提示"點擊的是第n個按鈕",此處我們先不用事件代理:

.....
<button>測驗1</button>
<button>測驗2</button>
<button>測驗3</button>
<script type="text/javascript">
   var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '個')
      }
    }
</script>  

萬萬沒想到，點擊任意一個按鈕，后臺都是彈出“第四個”,這是因為i是全域變數,執行到點擊事件時，此時i的值為3，那該如何修改，最簡單的是用let宣告i

 for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        console.log('第' + (i + 1) + '個')
      }
    }

另外我們可以通過閉包的方式來修改:

   for (var i = 0; i < btns.length; i++) {
      (function (j) {
        btns[j].onclick = function () {
          console.log('第' + (j + 1) + '個')
        }
      })(i)
    }

作者：浪里行舟
鏈接：深入淺出Javascript閉包
來源：github
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，

標籤：JavaScript

上一篇：jquery表格插件Datatables使用、快速上手

下一篇：ichartjs插件的使用