閉包理解

niceforbear 發(fā)布于2019-08-26 12:18 / 3477人閱讀

摘要：什么是閉包紅寶書上給出的定義是閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)，看到另外一個(gè)理解是函數(shù)和函數(shù)內(nèi)部能訪問到的變量或者環(huán)境的總合，就是一個(gè)閉包。閉包用于創(chuàng)建單例所謂單例，就是只有一個(gè)實(shí)例的對(duì)象。它使用立即執(zhí)行函數(shù)和閉包來(lái)達(dá)到目的。

面試必問題目，但總覺得理解得不深入，索性寫一篇文章慢慢梳理吧。

什么是閉包

紅寶書上給出的定義是：閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)，看到另外一個(gè)理解是：函數(shù)和函數(shù)內(nèi)部能訪問到的變量（或者環(huán)境）的總合，就是一個(gè)閉包。創(chuàng)建一個(gè)閉包最常見的方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。下面寫一個(gè)例子：

function f1() {
  var a = 1;
  function closure() {
    console.log(++a);
  } 
  return closure;
}

上面例子中，f1 內(nèi)部的匿名函數(shù)以及它能夠訪問到的外部函數(shù)的變量 a 合在一起，就形成了一個(gè)閉包。使用 return 將閉包返回的目的是讓它可以被外部訪問。下面看看它怎么使用：

var f2 = f1();   // 執(zhí)行外部函數(shù)，返回閉包
f2();     // 2
f2();     // 3
f2();     // 4

第一句執(zhí)行函數(shù) f1() 后，閉包被返回并賦值給了一個(gè)全局變量 f2，以后每次調(diào)用 f2()，變量 a 的值就會(huì)加 1。通常函數(shù)執(zhí)行完畢后，其作用域鏈和活動(dòng)對(duì)象都會(huì)被銷毀，為什么這里 a 并沒有被銷毀并且每次執(zhí)行 f2() 還會(huì)被遞增？原因是閉包有權(quán)訪問外部函數(shù)的變量，進(jìn)一步說，閉包的作用域鏈會(huì)引用外部函數(shù)的活動(dòng)對(duì)象，所以 f2() 在執(zhí)行時(shí)，其作用域鏈實(shí)際上是：

自身的活動(dòng)對(duì)象；

f1() 的活動(dòng)對(duì)象；

全局變量對(duì)象。

所以 f1() 執(zhí)行完后，其執(zhí)行環(huán)境的作用域鏈會(huì)被銷毀，但活動(dòng)對(duì)象仍然會(huì)留在內(nèi)存中，因?yàn)殚]包作用域鏈在引用這個(gè)活動(dòng)對(duì)象（說白了就是閉包還需要使用外層函數(shù)的變量，不允許它們被銷毀），直到閉包被銷毀后，f1() 的活動(dòng)對(duì)象才會(huì)被銷毀。

上面例子中，是將返回的閉包賦值給了一個(gè)全局變量 f2，var f2 = f1();，f2 是不會(huì)被銷毀的，每次執(zhí)行完 f2()，閉包的作用域鏈不會(huì)被銷毀，所以就會(huì)出現(xiàn)每次執(zhí)行 f2()，a 遞增。

但是換一種閉包的調(diào)用方式，情況會(huì)不同:

f1()();   // 2
f1()();   // 2

因?yàn)闆]有把閉包賦值給一個(gè)全局變量，閉包執(zhí)行完后，其執(zhí)行域鏈與活動(dòng)對(duì)象都銷毀了。

閉包的作用 創(chuàng)建用于訪問私有變量的公有方法

其實(shí)構(gòu)造函數(shù)中定義的實(shí)例方法，就是閉包:

function Person(){
  var name = "Leon";
  function sayHi() {
    alert("Hi!");
  }
  this.publicMethod = function() {
    alert(name);
    return sayHi();
  }
}

構(gòu)造函數(shù) Person 中定義實(shí)例方法 publicMethod() 就是一個(gè)閉包，它可以訪問外部函數(shù)的變量 name 和函數(shù) sayHi()，為什么要這么做呢？因?yàn)槲覀兿朐跇?gòu)造函數(shù)中定義一些私有變量，讓外部不能直接訪問，只能通過定義好的公有方法訪問，從而達(dá)到保護(hù)變量，收斂外部權(quán)限的目的。

而在普通函數(shù)中，把閉包 return 出去供外部使用，其實(shí)目的也就是：讓函數(shù)內(nèi)部的變量始終保持在內(nèi)存中，同時(shí)保護(hù)這些變量，讓它們不能被直接訪問。

function person(){
  var name = "Leon";
  function sayHi() {
    alert("Hi!");
  }
  function publicMethod() {
    alert(name);
    return sayHi();
  }
  return publicMethod;
}

閉包用于創(chuàng)建單例

所謂單例，就是只有一個(gè)實(shí)例的對(duì)象。單例模式的好處在于：

保證一個(gè)類只有一個(gè)實(shí)例，避免了一個(gè)在全局范圍內(nèi)使用的實(shí)例頻繁創(chuàng)建與銷毀。

比如網(wǎng)頁(yè)中的彈窗，點(diǎn)擊 a 按鈕彈出，點(diǎn)擊 b 按鈕隱藏，如果彈窗每一次彈出都需要新建一個(gè)對(duì)象，將會(huì)造成性能的浪費(fèi)，更好的辦法就是只實(shí)例化一個(gè)對(duì)象，一直使用。

劃分了命名空間，避免了與全局命名空間的沖突。

比如在一個(gè)單例中可以定義很多方法，通過單例.方法來(lái)使用，避免了在全局環(huán)境中定義函數(shù)，造成函數(shù)名沖突。

下面逐步介紹下單例的創(chuàng)建方式，后兩種方式將用到閉包。

1. 對(duì)象字面量創(chuàng)建單例

var singleton = {
  attr1: 1,
  attr2: 2,
  method: function () {
    return this.attr1 + this.attr2;
  }
}
var s1 = singleton;
var s2 = singleton;
console.log(s1 == s2)  // true

上面用字面量形式創(chuàng)建了一個(gè)單例，可以看到 s1 和 s2 是等同的。這種方式的問題在于外部可以直接訪問單例的內(nèi)部變量并加以修改，如果想讓單例擁有私有變量，就需要使用模塊模式，模塊模式就是用了閉包。

2. 模塊模式

JS 中的模塊模式的作用是：為單例添加私有變量和公有方法。它使用立即執(zhí)行函數(shù)和閉包來(lái)達(dá)到目的。

var singleton = (function(){
  // 創(chuàng)建私有變量
  var privateNum = 1;
  // 創(chuàng)建私有函數(shù)
  function privateFunc(){
    console.log(++privateNum);
  }
  // 返回一個(gè)對(duì)象包含公有方法
  return {
      publicMethod: function(){
        console.log(privateNum)
        return privateFunc()
      }
  };
})();

singleton.publicMethod();
// 1
// 2

這里首先定義了一個(gè)立即執(zhí)行函數(shù)，它返回一個(gè)對(duì)象，該對(duì)象中有一個(gè)閉包 publicMethod()，它可以訪問外部函數(shù)的私有變量。從而這個(gè)被返回的對(duì)象就成為了單例的公共接口，外部可以通過它的公有方法訪問私有變量而無(wú)權(quán)直接修改。總結(jié)一下就是兩點(diǎn)：

立即執(zhí)行函數(shù)可以創(chuàng)建一個(gè)塊級(jí)作用域，避免在全局環(huán)境中添加變量。

閉包可以訪問外層函數(shù)中的變量。

3. 構(gòu)造函數(shù)+閉包

上面提到的對(duì)象字面是用來(lái)創(chuàng)建單例的方法之一，既然單例只能被實(shí)例化一次，不難想到，在使用構(gòu)造函數(shù)新建實(shí)例時(shí)，先判斷實(shí)例是否已被新建，未被新建則新建實(shí)例，否則直接返回已被新建的實(shí)例。

var Singleton = function(name){
  this.name = name;
};

// 獲取實(shí)例對(duì)象
var getInstance = (function() {
  var instance = null;
  return function(name) {
      if(!instance) {
          instance = new Singleton(name);
      }
      return instance;
  }
})();

var a = getInstance("1");
console.log(a);  // {name: "1"}
var b = getInstance("2");
console.log(b);  // {name: "1"}

這里將構(gòu)造函數(shù)和實(shí)例化過程進(jìn)行了分離， getInstance()中存在一個(gè)閉包，它可以訪問到外部變量 instance，第一次 instance = null，則通過 new Singleton(name) 新建實(shí)例，并將這個(gè)實(shí)例保存在instance 中，之后再想新建實(shí)例，因?yàn)殚]包訪問到的instance已經(jīng)有值了，就會(huì)直接返回之前實(shí)例化的對(duì)象。