閉包是令人困惑的，因為它是一個“無形的”概念。

當(dāng)使用對象、變量或函數(shù)時，你會想：“在這里我需要一個變量”，然后將其添加到你的代碼中。

閉包有各種不同的形式。很多人在注意到閉包時，實際上他們已經(jīng)在不知不覺中多次使用過了——可能你也是如此。所以學(xué)習(xí)閉包不是要去了解什么「新」概念，而是要了解你「已經(jīng)」接觸過的東西。

[[337163]]

太長不看版

當(dāng)「函數(shù)訪問在其外部定義的變量時」，你需要閉包。

例如，這段代碼包含一個閉包：

let users = ['Alice', 'Dan', 'Jessica']; 
let query = 'A'; 
let user = users.filter(user => user.startsWith(query)); 

注意 user => user.startsWith(query) 本身是一個函數(shù)。它使用了 query 變量。但是，query 變量是在該函數(shù)的“外部”定義的。那就是閉包。

「如果你愿意，可以在這里就停止閱讀」。本文的其余部分會以不同的方式去處理閉包，并不解釋閉包是什么，而是帶你完成「發(fā)現(xiàn)」閉包的過程——就像1960年代的第一批程序員所做的那樣。

第1步：函數(shù)可以訪問外部變量

要了解閉包，我們需要對變量和函數(shù)有所了解。在這個例子中，我們在 eat 函數(shù)中聲明了 food 變量。

function eat() { 
  let food = 'cheese'; 
  console.log(food + ' is good'); 
} 
 
eat(); // => 'cheese is good' 

但是，如果我們以后想更改 eat 函數(shù)的 food 變量，該怎么辦?為此，我們可以將 food 變量本身從函數(shù)中移到頂層：

let food = 'cheese'; // 我們把它移動到外部 
 
function eat() { 
  console.log(food + ' is good'); 
} 

這樣我們可以在任何有需要的時候“從外部” 修改 food：

eat(); // => 'cheese is good' 
food = 'pizza'; 
eat(); // => 'pizza is good' 
food = 'sushi'; 
eat(); // => 'sushi is good' 

換句話說，food 變量不再是 eat 函數(shù)的局部變量，但是 eat 函數(shù)仍然可以輕松訪問它。「函數(shù)可以訪問它們之外的變量」。先停下來想一秒鐘，確保你對這個想法沒有任何疑問。然后繼續(xù)執(zhí)行第二步。

第2步：在函數(shù)調(diào)用中包裝代碼

假設(shè)我們有一些代碼：

/* 一些代碼片段 */ 

這些代碼做什么無關(guān)緊要。但是，假設(shè)「我們要運行兩次」。

一種方法是復(fù)制并粘貼：

/* 一些代碼片段 */ 
/* 一些代碼片段 */ 

另一種方法是使用循環(huán)：

for (let i = 0; i < 2; i++) { 
  /* 一些代碼片段 */ 
} 

第三種方法，也是我們今天特別感興趣的一種方法，將其包裝在一個函數(shù)中：

function doTheThing() { 
  /* 一些代碼片段 */ 
} 
 
doTheThing(); 
doTheThing(); 

函數(shù)為我們提供了很大的靈活性，因為我們可以隨時在程序中的任何位置把這個函數(shù)執(zhí)行任意次。

如果愿意，「我們也可以只調(diào)用一次」：

function doTheThing() { 
  /* 一些代碼片段 */ 
} 
 
doTheThing(); 

請注意，上面的代碼與原始代碼段是等效的：

/* 一些代碼片段 */ 

換句話說，「如果我們有一段代碼，將代碼“包裝”到一個函數(shù)中，然后只調(diào)用一次，那么我們就不會改變代碼的作用」。我們會忽略此規(guī)則的一些例外，但總的來說這應(yīng)該是有道理的。停留在這個想法上，直到你的大腦完全理解為止。

第3步：發(fā)現(xiàn)閉包

前面我們通過兩種不同的想法進(jìn)行了探索：

• 函數(shù)可以訪問在其外部定義的變量。
• 在函數(shù)中包裝代碼并調(diào)用一次不會改變結(jié)果。

那么如果把它們結(jié)合在一起會發(fā)生些什么呢。

我們將從第一步的代碼開始：

let food = 'cheese'; 
 
function eat() { 
  console.log(food + ' is good'); 
} 
 
eat(); 

然后，將整個例子中的代碼包裝到一個函數(shù)中，該函數(shù)將被調(diào)用一次：

function liveADay() { 
  let food = 'cheese'; 
 
  function eat() { 
    console.log(food + ' is good'); 
  } 
 
  eat(); 
} 
 
liveADay(); 

再次審視兩個代碼片段，并確保它們是等效的。

這段代碼有效!但是仔細(xì)看，注意 eat 函數(shù)在 liveADay 函數(shù)的內(nèi)部。這允許嗎?我們真的可以將一個函數(shù)放在另一個函數(shù)中嗎?

在某些語言中，用這種方式寫出來的代碼是「無效」的。例如這種代碼在 C 語言(沒有閉包)中無效。這意味著在 C 語言中，前面的第二個結(jié)論是不正確的——我們不能隨隨便便就把一些代碼包裝在函數(shù)中。但是 JavaScript 不受這種限制。

再看這段代碼，并注意在哪里聲明和使用了 food：

function liveADay() { 
  let food = 'cheese'; // 聲明 `food` 
 
  function eat() { 
    console.log(food + ' is good'); // 使用 `food` 
  } 
 
  eat(); 
} 
 
liveADay(); 

讓我們一起逐步看一下這段代碼。首先在頂層聲明 liveADay 函數(shù)，然后立即調(diào)用它。它有一個 food 局部變量，還包含一個 eat 函數(shù)。然后調(diào)用 eat 功能。因為 eat在 liveADay 內(nèi)部，所以它“看到”了所有變量。這就是為什么它可以讀取 food 變量的原因。

「這就是閉包」。

「我們說當(dāng)函數(shù)(例如 eat)讀取或?qū)懭朐谄渫獠?例如在 food 中)聲明的變量(例如 food)時，存在閉包。」

花一些時間多讀幾遍，并確保你已經(jīng)理解了上面的代碼代碼。

下面是本文最開始介紹過的例子：

let users = ['Alice', 'Dan', 'Jessica']; 
let query = 'A'; 
let user = users.filter(user => user.startsWith(query)); 

如果用函數(shù)表達(dá)式重寫，則更容易注意到閉包：

let users = ['Alice', 'Dan', 'Jessica']; 
// 1. 查詢變量在外部聲明 
let query = 'A'; 
let user = users.filter(function(user) { 
  // 2. 我們處于嵌套函數(shù)中 
  // 3. 然后我們讀取查詢變量（在外部聲明?。?nbsp;
  return user.startsWith(query); 
}); 

每當(dāng)函數(shù)訪問在其外部聲明的變量時，我們就說它是一個閉包。這個術(shù)語本身在使用時有些寬松。在本例中，有些人把「嵌套函數(shù)本身」稱為“閉包”。其他人可能會把訪問外部變量的“技術(shù)”稱為閉包。實際上這都沒關(guān)系。

函數(shù)調(diào)用的幽靈

閉看似簡單，但是這并不意味著他們沒有自己的陷阱。如果你真正考慮一下，函數(shù)可以在外部讀取和寫入變量的事實將會產(chǎn)生深遠(yuǎn)的影響。這意味著只要可以調(diào)用嵌套函數(shù)，這些變量就會“存活”下去：

function liveADay() { 
  let food = 'cheese'; 
 
  function eat() { 
    console.log(food + ' is good'); 
  } 
 
  // Call eat after five seconds 
  setTimeout(eat, 5000); 
} 
 
liveADay(); 

在這里，food 是在 liveADay() 函數(shù)調(diào)用內(nèi)的局部變量。在我們退出 liveADay 之后，很容易想到它“消失了”，并且它不會回來困擾我們。

但是，在 liveADay 內(nèi)部，我們告訴瀏覽器在五秒鐘內(nèi)調(diào)用 eat。然后，eat 讀取 food 變量。「因此，JavaScript引擎需要使特定的 liveADay() 調(diào)用中的food變量保持可用，直到調(diào)用eat?！?/p>

從這種意義上講，我們可以將閉包視為過去函數(shù)調(diào)用的“幻象”或“內(nèi)存”。即使我們的 liveADay() 函數(shù)調(diào)用已經(jīng)完成很長時間，但只要仍可以調(diào)用嵌套的 eat 函數(shù)，那么它的變量就必須繼續(xù)存在。幸運的是，JavaScript 為我們做到了這一點，因此我們就無需再去考慮它了。

為什么會有“閉包”?

最后，你可能想知道為什么以這種方式調(diào)用閉包。主要是歷史原因。一位熟悉計算機科學(xué)術(shù)語的人可能會說像 user => user.startsWith(query) 之類的表達(dá)式具有“開放綁定”。換句話說，從中可以清楚地知道 user 是什么(一個參數(shù))，但是還不能確定 query 是孤立的。當(dāng)我們說“實際上，query 指的是在外部聲明的變量”時，我們是在“關(guān)閉”開放綁定。換句話說，我們得到一個 閉包。

并非所有語言都實現(xiàn)閉包。例如在一些像 C 這樣的語言中，根本不允許嵌套函數(shù)。結(jié)果，一個函數(shù)只能訪問自己的局部變量或全局變量，永遠(yuǎn)不會出現(xiàn)訪問父函數(shù)的局部變量的情況。當(dāng)然，這種限制是痛苦的。

還有像 Rust 這樣的語言，它們實現(xiàn)了閉包，但是對于閉包和常規(guī)函數(shù)有著單獨的語法。因此，如果你想從函數(shù)外部讀取變量，則必須在 Rust 中選擇使用該變量。這是因為在底層，即使在函數(shù)調(diào)用之后，閉包也可能要求引擎保持外部變量(稱為“環(huán)境”)。這種開銷在 JavaScript 中是可以接受的，但是對于非常低級的語言來說，則可能會引發(fā)性能方面的問題。

到此為止，希望你能對閉包的概念有了深入理解!