JavaScript 閉包

wwq0327 發(fā)布于2019-08-22 14:55 / 2203人閱讀

摘要：在文檔中，閉包的定義是。假設(shè)是一個(gè)被創(chuàng)建的局部變量是內(nèi)部函數(shù)一個(gè)閉包使用了父函數(shù)中聲明的變量通過(guò)以上的代碼塊來(lái)看，我們可以看到閉包實(shí)際上指的就是一個(gè)擁有外部環(huán)境變量的函數(shù)。

閉包

對(duì)于 JavaScript 的初學(xué)者來(lái)說(shuō)，閉包的概念和應(yīng)用都可以算的上是難點(diǎn)。 MDN 的 JavaScript 文檔對(duì)閉包的概念給出了準(zhǔn)確的定義，也提供了簡(jiǎn)單直觀的的實(shí)例，是一個(gè)非常好的學(xué)習(xí)材料。這篇文章將從文檔出發(fā)，對(duì)閉包的知識(shí)點(diǎn)進(jìn)行一個(gè)簡(jiǎn)單的梳理。

閉包是什么

首先，我們需要對(duì)閉包提供一個(gè)準(zhǔn)確的定義。在文檔中，閉包的定義是 "A closure is the combination of a function and the lexical environment within which that function was declared"。這個(gè)定義是很拗口的一句話。詞法環(huán)境（lexical environment）這個(gè)描述對(duì)于初學(xué)者來(lái)說(shuō)過(guò)于學(xué)術(shù)和抽象，我們只需要記住就好。真正理解定義最好方式就是通過(guò)實(shí)際的代碼。假設(shè)：

function init() {
   var name = "Hello"; // name 是一個(gè)被 init 創(chuàng)建的局部變量
   function displayName() { 
       // displayName() 是內(nèi)部函數(shù),一個(gè)閉包
       alert(name); // 使用了父函數(shù)中聲明的變量
   }
   displayName(); 
}
init();

通過(guò)以上的代碼塊來(lái)看，我們可以看到閉包實(shí)際上指的就是一個(gè)’擁有外部環(huán)境變量的函數(shù)‘。在上面的例子中函數(shù) displayName 調(diào)用了不屬于本身的外部變量 name，不管此 displayName 函數(shù)最終是否被返回，實(shí)際上由 name 和 displayName 組成的閉包已經(jīng)形成。

 function init() {
    var name = "Hello"; // name 是一個(gè)被 init 創(chuàng)建的局部變量
    function displayName() { 
        // displayName() 是內(nèi)部函數(shù),一個(gè)閉包
        alert(name); // 使用了父函數(shù)中聲明的變量
    }
    return displayName(); // 閉包被返回
}
var fun = init();
fun();

我們?cè)賮?lái)看一下這一塊的新的代碼，唯一的區(qū)別在于這個(gè)代碼中函數(shù)init 返回了一個(gè)函數(shù) displayName()。也就是返回了一個(gè)閉包。通過(guò)這個(gè)返回的閉包，我們就可以訪問這個(gè)函數(shù)所相關(guān)聯(lián)的詞法環(huán)境或者說(shuō)數(shù)據(jù)。本來(lái)應(yīng)該被銷毀的 name 變量保留了下來(lái)，而且只能通過(guò)調(diào)用閉包的方式來(lái)訪問，這也就是私有性。

閉包的作用

實(shí)際上在上一個(gè)例子中，我們已經(jīng)看到了閉包的作用，閉包可以用來(lái)模擬私有變量和方法。它讓函數(shù)和函數(shù)所操作的某些數(shù)據(jù)(環(huán)境)關(guān)聯(lián)了起來(lái)。

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

在上面的例子中我們可以看到變量 privateCounter 和函數(shù) changeBy 作為下面三個(gè)函數(shù)共同的詞法環(huán)境形成了閉包。在 makeCounter()執(zhí)行之后, 本該消失的詞法環(huán)境被保留下來(lái)，只能通過(guò)返回的三個(gè)函數(shù)進(jìn)行更改和訪問。這種行為模擬出了類似 JAVA 類中的私有變量和私有方法。

在循環(huán)中創(chuàng)建閉包：一個(gè)常見錯(cuò)誤；

在 ECMAScript 2015 引入 let 這個(gè)關(guān)鍵字之前，在循環(huán)中有一個(gè)常見的閉包創(chuàng)建問題。

Helpful notes will appear here

E-mail:

Name:

Age:

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {"id": "email", "help": "Your e-mail address"},
      {"id": "name", "help": "Your full name"},
      {"id": "age", "help": "Your age (you must be over 16)"}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

這段代碼的結(jié)果就是，無(wú)論你選擇哪一個(gè)輸入框，helper 信息永遠(yuǎn)都會(huì)顯示 Your age (you must be over 16)"。原因就在于在返回的三個(gè)閉包實(shí)際上共享了 item 這一個(gè)詞法環(huán)境，所以 helper 永遠(yuǎn)只顯示為最后 age 的 helper。這里就是閉包里另一個(gè)很重要的知識(shí)點(diǎn)，閉包只會(huì)捕獲自由變量的引用，所以當(dāng) item 指向的helpText值最后變?yōu)?age 時(shí)，三個(gè)閉包的中的 item 也都變成了 age。根據(jù)這一點(diǎn)我們可以將代碼修改如下

function setupHelpAnonymous(){
    var helpText = [
      {"id": "email", "help": "Your e-mail address"},
      {"id": "name", "help": "Your full name"},
      {"id": "age", "help": "Your age (you must be over 16)"}
    ];

    for(var i = 0; i < helpText.length; i++){
      var item = helpText[i];
      (function() {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = function() {
          showHelp(item.help);
        }
     })();
    }
  }

  setupHelpAnonymous()

在上面的代碼片段中我們使用了一個(gè) IIFE (立即執(zhí)行函數(shù)表達(dá)式) 對(duì) item 這個(gè)引用進(jìn)行了立刻求值。這樣我們就能得到想要的結(jié)果。而在ES6中的 ’塊級(jí)作用域‘ 也可以解決這個(gè)問題。

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {"id": "email", "help": "Your e-mail address"},
      {"id": "name", "help": "Your full name"},
      {"id": "age", "help": "Your age (you must be over 16)"}
    ];

  for (var i = 0; i < helpText.length; i++) {
    let item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

每一次循環(huán)，都有一個(gè)新的 item 被創(chuàng)建，三個(gè)閉包不再共享同一個(gè)詞法環(huán)境；相比匿名閉包的方式，也沒有創(chuàng)建多余的閉包。