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

何為閉包

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

function foo() {
    var a = 2;

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

    return bar;
}

var baz = foo();

baz(); // 2

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

closure_desc.png

閉包的使用

當(dāng)學(xué)到一門新技術(shù)或語言的新特性嘹锁，很多人都想知道其應(yīng)用場(chǎng)景，并迫不及待的在下一次實(shí)戰(zhàn)中進(jìn)行使用着裹，這是一種好的學(xué)習(xí)新知識(shí)的方式领猾，但我認(rèn)為對(duì)于閉包，很多時(shí)候不是你不會(huì)用骇扇，而是你的代碼已經(jīng)產(chǎn)生了閉包自己卻渾然不知摔竿，所以我認(rèn)為我們需要做的是了解閉包的概念并在自己的JS代碼中找尋自己已經(jīng)不經(jīng)意間寫出的閉包，進(jìn)一步加深對(duì)其的認(rèn)識(shí)少孝，然后做到從無意識(shí)的產(chǎn)生閉包到有意識(shí)的利用閉包继低，需要記住：閉包在JS中無處不在稍走，下面我將給出閉包的幾種典型應(yīng)用場(chǎng)景并簡(jiǎn)單羅列不合理的使用閉包會(huì)帶來哪些問題：

• 場(chǎng)景一：方法回調(diào)
  在JS中袁翁，存在著大量的回調(diào)柴底，這種回調(diào)也是JS異步編程的基礎(chǔ)，同時(shí)也彌補(bǔ)了JS單線程運(yùn)作的缺陷粱胜，來看代碼：

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

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

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

  通過閉包涯曲，在IIFE內(nèi)部可以訪問外部作用域的變量
• 場(chǎng)景三：模塊化編程
  隨著前端工程化的發(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
  

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

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

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

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

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

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

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

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

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

總結(jié)

本文對(duì)閉包的概念進(jìn)行了解釋观堂，并給出了產(chǎn)生閉包的典型場(chǎng)景和需要注意的點(diǎn)，雖然實(shí)際的情況會(huì)比本文所列舉的實(shí)例更復(fù)雜呀忧，更多樣师痕，但萬變不離其中，把握閉包的本質(zhì)而账，就能合理的利用閉包帶來的魔力七兜，為我所用；同時(shí)需要注意福扬，閉包不是一個(gè)你需要努力掌握并刻意使用的技術(shù)，它只是基于JS的其他特性自然產(chǎn)生（就如本文中一直用的一個(gè)詞是產(chǎn)生閉包）的一種特性惜犀，你需要做的就是了解它铛碑，擁抱它