正如此前提到過的，出于優(yōu)化的目的，當(dāng)函數(shù)不使用自由變量的時(shí)候，實(shí)現(xiàn)層可能就不會(huì)保存上層作用域鏈。 然而，ECMAScript-262-3標(biāo)準(zhǔn)中并未對此作任何說明；因此，嚴(yán)格來說 —— 所有函數(shù)都會(huì)在創(chuàng)建的時(shí)候?qū)⑸蠈幼饔糜蜴湵４嬖赱[Scope]]中。

有些實(shí)現(xiàn)中，允許對閉包作用域直接進(jìn)行訪問。比如Rhino，針對函數(shù)的[[Scope]]屬性，對應(yīng)有一個(gè)非標(biāo)準(zhǔn)的 parent屬性，在第二章中作過介紹：

var global = this;
var x = 10;

var foo = (function () {

  var y = 20;

  return function () {
    alert(y);
  };

})();

foo(); // 20
alert(foo.__parent__.y); // 20

foo.__parent__.y = 30;
foo(); // 30

// 還可以操作作用域鏈
alert(foo.__parent__.__parent__ === global); // true
alert(foo.__parent__.__parent__.x); // 10

這里還要注意的是：在ECMAScript中，同一個(gè)上下文中創(chuàng)建的閉包是共用一個(gè)[[Scope]]屬性的。 也就是說，某個(gè)閉包對其中的變量做修改會(huì)影響到其他閉包對其變量的讀?。?/p>

var firstClosure;
var secondClosure;

function foo() {

  var x = 1;

  firstClosure = function () { return ++x; };
  secondClosure = function () { return --x; };

  x = 2; // 對AO["x"]產(chǎn)生了影響, 其值在兩個(gè)閉包的[[Scope]]中

  alert(firstClosure()); // 3, 通過 firstClosure.[[Scope]]
}

foo();

alert(firstClosure()); // 4
alert(secondClosure()); // 3

正因?yàn)檫@個(gè)特性，很多人都會(huì)犯一個(gè)非常常見的錯(cuò)誤： 當(dāng)在循環(huán)中創(chuàng)建了函數(shù)，然后將循環(huán)的索引值和每個(gè)函數(shù)綁定的時(shí)候，通常得到的結(jié)果不是預(yù)期的（預(yù)期是希望每個(gè)函數(shù)都能夠獲取各自對應(yīng)的索引值）。

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}

data[0](); // 3, 而不是 0
data[1](); // 3, 而不是 1
data[2](); // 3, 而不是 2

上述例子就證明了 —— 同一個(gè)上下文中創(chuàng)建的閉包是共用一個(gè)[[Scope]]屬性的。因此上層上下文中的變量“k”是可以很容易就被改變的。

如下所示：

activeContext.Scope = [
  ... // higher variable objects
  {data: [...], k: 3} // activation object
];

data[0].[[Scope]] === Scope;
data[1].[[Scope]] === Scope;
data[2].[[Scope]] === Scope;

這樣一來，在函數(shù)激活的時(shí)候，最終使用到的k就已經(jīng)變成了3了。

如下所示，創(chuàng)建一個(gè)額外的閉包就可以解決這個(gè)問題了：

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 將 "k" 值傳遞進(jìn)去
}

// 現(xiàn)在就對了
data[0](); // 0
data[1](); // 1
data[2](); // 2

上述例子中，函數(shù)“_helper”創(chuàng)建出來之后，通過參數(shù)“k”激活。其返回值也是個(gè)函數(shù)，該函數(shù)保存在對應(yīng)的數(shù)組元素中。 這種技術(shù)產(chǎn)生了如下效果： 在函數(shù)激活時(shí)，每次“_helper”都會(huì)創(chuàng)建一個(gè)新的變量對象，其中含有參數(shù)“x”，“x”的值就是傳遞進(jìn)來的“k”的值。 這樣一來，返回的函數(shù)的[[Scope]]就成了如下所示：

data[0].[[Scope]] === [
  ... // 更上層的變量對象
  上層上下文的AO: {data: [...], k: 3},
  _helper上下文的AO: {x: 0}
];

data[1].[[Scope]] === [
  ... // 更上層的變量對象
  上層上下文的AO: {data: [...], k: 3},
  _helper上下文的AO: {x: 1}
];

data[2].[[Scope]] === [
  ... // 更上層的變量對象
  上層上下文的AO: {data: [...], k: 3},
  _helper上下文的AO: {x: 2}
];

我們看到，這個(gè)時(shí)候函數(shù)的[[Scope]]屬性就有了真正想要的值了，為了達(dá)到這樣的目的，我們不得不在[[Scope]]中創(chuàng)建額外的變量對象。 要注意的是，在返回的函數(shù)中，如果要獲取“k”的值，那么該值還是會(huì)是3。

順便提下，大量介紹JavaScript的文章都認(rèn)為只有額外創(chuàng)建的函數(shù)才是閉包，這種說法是錯(cuò)誤的。 實(shí)踐得出，這種方式是最有效的，然而，從理論角度來說，在ECMAScript中所有的函數(shù)都是閉包。

然而，上述提到的方法并不是唯一的方法。通過其他方式也可以獲得正確的“k”的值，如下所示：

var data = [];

for (var k = 0; k < 3; k++) {
  (data[k] = function () {
    alert(arguments.callee.x);
  }).x = k; // 將“k”存儲(chǔ)為函數(shù)的一個(gè)屬性
}

// 同樣也是可行的
data[0](); // 0
data[1](); // 1
data[2](); // 2

另外一個(gè)特性是從閉包中返回。在ECMAScript中，閉包中的返回語句會(huì)將控制流返回給調(diào)用上下文（調(diào)用者）。 而在其他語言中，比如，Ruby，有很多中形式的閉包，相應(yīng)的處理閉包返回也都不同，下面幾種方式都是可能的：可能直接返回給調(diào)用者，或者在某些情況下——直接從上下文退出。

ECMAScript標(biāo)準(zhǔn)的退出行為如下：

function getElement() {

  [1, 2, 3].forEach(function (element) {

    if (element % 2 == 0) {
      // 返回給函數(shù)"forEach"，
      // 而不會(huì)從getElement函數(shù)返回
      alert("found: " + element); // found: 2
      return element;
    }

  });

  return null;
}

alert(getElement()); // null, 而不是 2

然而，在ECMAScript中通過try catch可以實(shí)現(xiàn)如下效果：

var $break = {};

function getElement() {

  try {

    [1, 2, 3].forEach(function (element) {

      if (element % 2 == 0) {
        // 直接從getElement"返回"
        alert("found: " + element); // found: 2
        $break.data = element;
        throw $break;
      }

    });

  } catch (e) {
    if (e == $break) {
      return $break.data;
    }
  }

  return null;
}

alert(getElement()); // 2

通常，程序員會(huì)錯(cuò)誤的認(rèn)為，只有匿名函數(shù)才是閉包。其實(shí)并非如此，正如我們所看到的 —— 正是因?yàn)樽饔糜蜴?，使得所有的函?shù)都是閉包（與函數(shù)類型無關(guān)： 匿名函數(shù)，F(xiàn)E，NFE，F(xiàn)D都是閉包）， 這里只有一類函數(shù)除外，那就是通過Function構(gòu)造器創(chuàng)建的函數(shù)，因?yàn)槠鋄[Scope]]只包含全局對象。 為了更好的澄清該問題，我們對ECMAScript中的閉包作兩個(gè)定義（即兩種閉包）：

ECMAScript中，閉包指的是：

從理論角度：所有的函數(shù)。因?yàn)樗鼈兌荚趧?chuàng)建的時(shí)候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因?yàn)楹瘮?shù)中訪問全局變量就相當(dāng)于是在訪問自由變量，這個(gè)時(shí)候使用最外層的作用域。

從實(shí)踐角度：以下函數(shù)才算是閉包：

即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在（比如，內(nèi)部函數(shù)從父函數(shù)中返回）

在代碼中引用了自由變量

實(shí)際使用的時(shí)候，閉包可以創(chuàng)建出非常優(yōu)雅的設(shè)計(jì)，允許對funarg上定義的多種計(jì)算方式進(jìn)行定制。 如下就是數(shù)組排序的例子，它接受一個(gè)排序條件函數(shù)作為參數(shù)：

[1, 2, 3].sort(function (a, b) {
  ... // 排序條件
});

同樣的例子還有，數(shù)組的map方法（并非所有的實(shí)現(xiàn)都支持?jǐn)?shù)組map方法，SpiderMonkey從1.6版本開始有支持），該方法根據(jù)函數(shù)中定義的條件將原數(shù)組映射到一個(gè)新的數(shù)組中：

[1, 2, 3].map(function (element) {
  return element * 2;
}); // [2, 4, 6]

使用函數(shù)式參數(shù)，可以很方便的實(shí)現(xiàn)一個(gè)搜索方法，并且可以支持無窮多的搜索條件：

someCollection.find(function (element) {
  return element.someProperty == "searchCondition";
});

還有應(yīng)用函數(shù)，比如常見的forEach方法，將funarg應(yīng)用到每個(gè)數(shù)組元素：

[1, 2, 3].forEach(function (element) {
  if (element % 2 != 0) {
    alert(element);
  }
}); // 1, 3

順便提下，函數(shù)對象的 apply 和 call方法，在函數(shù)式編程中也可以用作應(yīng)用函數(shù)。 apply和call已經(jīng)在討論“this”的時(shí)候介紹過了；這里，我們將它們看作是應(yīng)用函數(shù) —— 應(yīng)用到參數(shù)中的函數(shù)（在apply中是參數(shù)列表，在call中是獨(dú)立的參數(shù)）：

(function () {
  alert([].join.call(arguments, ";")); // 1;2;3
}).apply(this, [1, 2, 3]);

閉包還有另外一個(gè)非常重要的應(yīng)用 —— 延遲調(diào)用：

var a = 10;
setTimeout(function () {
  alert(a); // 10, 一秒鐘后
}, 1000);

也可以用于回調(diào)函數(shù)：

...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
  // 當(dāng)數(shù)據(jù)就緒的時(shí)候，才會(huì)調(diào)用;
  // 這里，不論是在哪個(gè)上下文中創(chuàng)建，變量“x”的值已經(jīng)存在了
  alert(x); // 10
};
..

還可以用于封裝作用域來隱藏輔助對象：

    var foo = {};

    // initialization
    (function (object) {

      var x = 10;

      object.getX = function _getX() {
        return x;
      };

    })(foo);

    alert(foo.getX()); // get closured "x" – 10

本文介紹了更多關(guān)于ECMAScript-262-3的理論知識(shí)，而我認(rèn)為，這些基礎(chǔ)的理論有助于理解ECMAScript中閉包的概念。

JavaScript閉包（by Richard Cornford）

Funarg問題

閉包

英文原文
來自前端翻譯小站 趙靜、彭森材