通過示例學習JavaScript閉包

譯者按: 在上一篇博客，我們通過實現一個計數器，了解了如何使用閉包(Closure)**，這篇博客將提供一些代碼示例，幫助大家理解閉包。

• 原文: JavaScript Closures for Dummies

• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。

閉包并不神奇

其實，只要你領會了閉包的關鍵概念，一切就非常簡單了。作為JavaScript開發者，你應該可以理解以下代碼：

Example 1

function sayHello(name) 
{

  var text = 'Hello ' + name;

  var sayAlert = function() { console.log(text); }

  sayAlert();
}

sayHello("Bob") // 輸出"Hello Bob"

在sayHello()函數中定義并調用了sayAlert()函數；sayAlert()作為內層函數，可以訪問外層函數sayHello()中的text變量。理解這一點，你就可以繼續閱讀這篇博客了。

一個閉包示例

兩句話總結閉包(注意，這個定義并不規范，但是有助于理解):

• 閉包就是函數的局部變量，這些變量在函數return之后仍然可以訪問
• 閉包就是函數的內存堆棧，這個內存堆棧在函數return之后并沒有被收回

Example 2

function sayHello2(name) 
{
  var text = 'Hello ' + name; // 局部變量

  var sayAlert = function() { console.log(text); }

  return sayAlert;
}

var say2 = sayHello2("Jane");
say2(); // 輸出"Hello Jane"

調用sayHello2()函數返回了sayAlert，它是一個引用變量，指向一個函數。相信大多數JavaScript程序員能夠理解什么是引用變量，而C程序員則可以把sayAlert以及say2理解為指向函數的指針。

C指針與JavaScript引用變量并無實質區分。在JavaScript中，不妨這樣理解，指向函數的引用變量不僅指向函數本身，還隱含地指向了一個閉包。

代碼中匿名函數function() { alert(text); }是在另一個函數，即sayHello2()中定義的。在JavaScript中，如果你在函數中定義了一個函數，則創建了閉包。

對于C語言，以及其他絕大多數語言：函數return之后，其局部變量將無法訪問，因為內存中的堆棧會被銷毀。

對于JavaScript，如果你在函數中定義函數的話，當外層函數return之后，其局部變量仍然可以訪問。代碼中已經證明了這一點：當sayHello2()函數return之后，我們調用了say2()函數，成功打印了text變量，而text變量正是sayHello2()函數的局部變量。

更多示例

如果只是從定義的角度去理解閉包，顯然是非常困難。然而，如果通過代碼示例去理解閉包，則簡單很多。因此，強烈建議你認真地理解每一個示例，弄清楚它們是如何運行的，這樣你會避免很多奇怪的BUG。

Example 3

Example 3中，say667()函數return后，num變量將仍然保留在內存中。并且，sayNumba函數中的num變量并非復制而是引用，因此它輸出的是667而非666。

function say667() {

  var num = 666; // say667()函數return后，num變量將仍然保留在內存中

  var sayAlert = function() { console.log(num); }

  num++;

  return sayAlert;

}

var sayNumba = say667();

sayNumba(); // 輸出667

Example 4

Example 4中，3個全局函數gAlertNumber，gIncreaseNumber，gSetNumber指向了同一個閉包，因為它們是在同一次setupSomeGlobals()調用中聲明的。它們所指向的閉包就是setupSomeGlobals()函數的局部變量，包括了num變量。也就是說，它們操作的是同一個num變量。

function setupSomeGlobals() {

  var num = 666;

  gAlertNumber = function() { console.log(num); }

  gIncreaseNumber = function() { num++; }

  gSetNumber = function(x) { num = x; }

}

setupSomeGlobals();
gAlertNumber(); // 輸出666

gIncreaseNumber();
gAlertNumber(); // 輸出667

gSetNumber(5);
gAlertNumber(); // 輸出5

Example 5

Example 5的代碼比較難，不少人都會犯同樣的錯誤，因為它的執行結果很可能違背了你的直覺。

function buildList(list) 
{
  var result = [];

  for (var i = 0; i < list.length; i++) 
  {
    var item = 'item' + list[i];
    result.push( function() { console.log(item + ' ' + list[i])} );
  }

  return result;
}

var fnlist = buildList([1,2,3]);

for (var j = 0; j < fnlist.length; j++) 
{
  fnlist[j](); // 連續輸出3個"item3 undefined"
}

result.push( function() {alert(item + ' ' + list[i])}將指向匿名函數function() {alert(item + ' ' + list[i])}的引用變量加入了數組，其效果等價于：

pointer = function() {alert(item + ' ' + list[i])};
result.push(pointer);

代碼執行后，連續輸出了3個"item3 undefined"，明顯與直覺不同。

調用buildList()函數之后，我們得到了一個數組，數組中有3個函數，而這3個函數指向了同一個閉包。而閉包中的item變量值為"item3"，i變量值為3。如果理解了3個函數指向的是同一個閉包，則輸出結果就不難理解了。

Example 6

Example 6中，alice變量在sayAlert函數之后定義，這并未影響代碼執行。因為返回函數sayAlice2所指向的閉包會包含sayAlice()函數中的所有局部變量，這自然包括了alice變量，因此可以正常打印"Hello Alice"。

function sayAlice() 
{
  var sayAlert = function() { console.log(alice); }

  var alice = 'Hello Alice';

  return sayAlert;
}

var sayAlice2 = sayAlice();

sayAlice2(); // 輸出"Hello Alice"

Example 7

由Example 7可知，每次調用newClosure()都會創建獨立的閉包，它們的局部變量num與ref的值并不相同。

function newClosure(someNum, someRef) 
{
  var anArray = [1,2,3];
  var num = someNum;
  var ref = someRef;

  return function(x) 
  {
      num += x;

      anArray.push(num);

      console.log('num: ' + num + "; " + 'anArray ' + anArray.toString() + "; " + 'ref.someVar ' + ref.someVar);
    }
}

closure1 = newClosure(40, {someVar: "closure 1"}); 
closure2 = newClosure(1000, {someVar: "closure 2"}); 

closure1(5); // 打印"num: 45; anArray 1,2,3,45; ref.someVar closure 1"
closure2(-10); // 打印"num: 990; anArray 1,2,3,990; ref.someVar closure 2"

總結

嚴格來講，我對閉包的解釋并不準確。不過，將閉包簡單地看做局部變量，理解起來會更加簡單。

參考鏈接

• Private Members in JavaScript
• Memory Leakage in Internet Explorer

關于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！

版權聲明

轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/07/javascript-closure-examples/