在JS的世界中，閉包一直是一個神奇的存在，它無處不在，卻又很難感知；對于很多JS程序員來說，也許寫了多年的程序之后也并不清楚閉包為何物，但是這也并不妨礙他們編寫JS程序，從另一方面來說，也許他們無意中就寫了一段產(chǎn)生閉包的代碼，自己卻毫不知情

何為閉包

在解釋一個事物之前，一般都需要對其進行概念抽象，我想，閉包的概念可以定義為：所謂閉包， 即一個方法內(nèi)部能夠持續(xù)的訪問其語義作用域（包括其嵌套作用域），即使對該方法的調(diào)用發(fā)生在該語義作用域之外（如果對語義作用域的概念不了解，可以參考：JS的作用域），這句概念定義過于抽象，下面舉例來說明：

function foo() {
    var a = 2;

    function bar() {
        console.log( a );
    }

    return bar;
}

var baz = foo();

baz(); // 2

再一張圖例來解釋這段程序

closure_desc.png

閉包的使用

當學到一門新技術或語言的新特性，很多人都想知道其應用場景，并迫不及待的在下一次實戰(zhàn)中進行使用，這是一種好的學習新知識的方式，但我認為對于閉包，很多時候不是你不會用，而是你的代碼已經(jīng)產(chǎn)生了閉包自己卻渾然不知，所以我認為我們需要做的是了解閉包的概念并在自己的JS代碼中找尋自己已經(jīng)不經(jīng)意間寫出的閉包，進一步加深對其的認識，然后做到從無意識的產(chǎn)生閉包到有意識的利用閉包，需要記?。?strong>閉包在JS中無處不在，下面我將給出閉包的幾種典型應用場景并簡單羅列不合理的使用閉包會帶來哪些問題：

• 場景一：方法回調(diào)
  在JS中，存在著大量的回調(diào)，這種回調(diào)也是JS異步編程的基礎，同時也彌補了JS單線程運作的缺陷，來看代碼：

  function wait(message) {
      setTimeout( function timer(){
        console.log( message );
      }, 1000 );
  }
  
  wait( "Hello, closure!" );
  

  在函數(shù)setTimeout()中存在一個回調(diào)函數(shù)timer()，通過閉包持有其語義作用域中變量message的引用（產(chǎn)生閉包），那么就可以在語義作用域wait()的外部調(diào)用wait()方法并給message設值
• 場景二：IIFE（Invoking Function Expressions Immediately，具體可參考JS的作用域）
  IIFE作為一種簡單的作用域隔離方法在JS中也有大量的使用，同時IIFE也經(jīng)常與閉包一起使用，來看代碼：

  var a = 2;
  
  (function IIFE(){
      console.log( a );
  })();
  

  通過閉包，在IIFE內(nèi)部可以訪問外部作用域的變量
• 場景三：模塊化編程
  隨著前端工程化的發(fā)展，為了方便組織，JS的代碼組織已經(jīng)越來越趨向于模塊化，而模塊里存在大量的閉包，來看代碼：

  function CoolModule() {
      var something = "cool";
      var another = [1, 2, 3];
  
      function doSomething() {
          console.log( something );
      }
  
      function doAnother() {
          console.log( another.join( " ! " ) );
      }
  
      return {
          doSomething: doSomething,
          doAnother: doAnother
      };
  }
  
  var foo = CoolModule();
  
  foo.doSomething(); // cool
  foo.doAnother(); // 1 ! 2 ! 3
  

  其實模塊化的主要目的在于作用域隔離，而基于閉包，各模塊內(nèi)部可以互不干擾的進行自身的功能擴展，當然上面的代碼只是舉例，實際的模塊化編寫形式不是這樣的，但本質(zhì)不變
• 問題一：閉包導致的大量無用數(shù)據(jù)得不到回收

  function doSomething(selector) {
      var someReallyBigData = { .. };
      process( someReallyBigData );
  
      $( selector ).click( function activator(){
          //doSomething with selector
      } );
  }
  

  這是一段很常見的處理特定元素click事件的代碼，很明顯由于引用了外部作用域變量selector，此時閉包已經(jīng)產(chǎn)生，點擊后函數(shù)正常觸發(fā)，一切OK，但是需要注意，由于在click事件代碼的上方，有關于someReallyBigData的處理，我們稱之為大量臨時數(shù)據(jù)的處理，正常來講，JS的垃圾回收機制應該會及時的將這些大量臨時數(shù)據(jù)回收掉，遺憾的是，由于閉包的存在，JS并不會這么做；那么該怎么辦呢？一種方法是使用塊級作用域，如：

  function doSomething(selector) {
      {
          var someReallyBigData = { .. };
          process( someReallyBigData );
      }
      $( selector ).click( function activator(){
          //doSomething with selector
      } );
  }
  

  改進后的寫法里，將大量臨時數(shù)據(jù)的處理放置于外部作用域的塊級作用域中，它不會受到閉包的影響，在執(zhí)行完成后會被JS的垃圾回收機制及時清理
• 問題二：循環(huán)體中不合理的使用閉包
  在循環(huán)體內(nèi)使用閉包也是JS很常見的寫法，但需要注意的是，這種寫法稍不注意就會產(chǎn)生錯誤的結果，來看代碼：

  for (var i=1; i<=5; i++) {
      setTimeout( function timer(){
          console.log( i );
      }, i*1000 );
  }
  

  我想，寫這段代碼的人肯定是希望實現(xiàn)"每隔一秒執(zhí)行一次打印操作，并且打印的值逐次遞增，一共打印5次"，但實際的結果卻是打印5個6，究其原因在于通過timer()訪問外部作用域變量i的值時，由于已經(jīng)延時了一秒，此時i的值已經(jīng)循環(huán)了5次，變成了6，5次調(diào)用timer()，5次皆通過閉包獲取到的是i的最新值，該場景下你也許不想使用閉包，但是很遺憾，這段代碼就是簡單直接的產(chǎn)生了閉包并使用了其特性；如何規(guī)避呢？看改進后的代碼：

  for (var i=1; i<=5; i++) {
      (function(j){
          setTimeout( function timer(){
              console.log( j );
          }, j*1000 );
      })( i );
  }
  

  運行這段代碼后發(fā)現(xiàn)正是我們想要的結果，下面來分析這段代碼：閉包依然存在，不同的是5次循環(huán)，每一次timer()的閉包都是針對一個新的作用域（IIFE所產(chǎn)生的作用域），每個新的作用域里j值各不相同（每次循環(huán)加1），所以閉包雖然依然存在，但得到的卻是正確的結果

總結

本文對閉包的概念進行了解釋，并給出了產(chǎn)生閉包的典型場景和需要注意的點，雖然實際的情況會比本文所列舉的實例更復雜，更多樣，但萬變不離其中，把握閉包的本質(zhì)，就能合理的利用閉包帶來的魔力，為我所用；同時需要注意，閉包不是一個你需要努力掌握并刻意使用的技術，它只是基于JS的其他特性自然產(chǎn)生（就如本文中一直用的一個詞是產(chǎn)生閉包）的一種特性，你需要做的就是了解它，擁抱它