大家好，我是前端西瓜哥。

這次從內(nèi)存管理的角度來看看，閉包是怎么產(chǎn)生的。

我們知道，在調(diào)用函數(shù)時(shí)，其實(shí)會(huì)產(chǎn)生臨時(shí)的 調(diào)用棧。這些調(diào)用棧保存的是 執(zhí)行上下本，并實(shí)際保存在 棧內(nèi)存 中。

每執(zhí)行一個(gè)函數(shù)，函數(shù)內(nèi)的局部臨時(shí)變量會(huì)臨時(shí)保存起來。如果此時(shí)函數(shù)又調(diào)用了另一個(gè)函數(shù)，另一個(gè)函數(shù)下的局部變量也要保存下來，就這樣，我們產(chǎn)生了棧。

當(dāng)一個(gè)函數(shù)執(zhí)行完后，它對(duì)應(yīng)的局部臨時(shí)變量就會(huì)被銷毀。

局部變量保存下來，是為了保護(hù)上下文現(xiàn)場(chǎng)。

舉例說明一下：

function a() {
  const a_num = 99;
  const a_obj = { val: "a" };
  b();
}

function b() {
  const b_str = "text";
  c();
}

function c() {
  const c_bool = true;
  // debugger
}

a();

這里我們嵌套調(diào)用了 a、b、c 函數(shù)，會(huì)產(chǎn)生如下的調(diào)用棧。

基本類型的臨時(shí)變量，會(huì)直接保存到棧內(nèi)存中，對(duì)于引用類型，則是在堆內(nèi)存中生成，然后將地址拿到，保存到棧內(nèi)存中。

引用類型為什么不直接放到棧內(nèi)存中？因?yàn)闂?nèi)存不是很大，很容易就棧溢出，而引用類型通常很大。

閉包的產(chǎn)生

函數(shù)調(diào)用完成后，它內(nèi)部聲明的臨時(shí)變量會(huì)被銷毀。理論上應(yīng)該如此，但如果使用了閉包，可以會(huì)讓臨時(shí)變量一直保留不被銷毀。

例子：

function createCounter() {
  let count = 0;
  let otherVal = "other val";
  return function counter() {
    // debugger;
    console.log(count++);
  };
}

const counter = createCounter();

console.log(counter());

執(zhí)行過程為：

1. 執(zhí)行函數(shù) createCounter 時(shí)，會(huì)創(chuàng)建一個(gè)空的上下文對(duì)象。
2. 遇到內(nèi)部函數(shù) counter，會(huì)預(yù)掃描內(nèi)部函數(shù) counter 使用了 createCounter 下的哪些便利，最終掃描出 count 變量。于是在堆內(nèi)存創(chuàng)建一個(gè)閉包 Closure (createCounter) 對(duì)象，將 count 加進(jìn)去。otherVal 不會(huì)加到閉包對(duì)象上，因?yàn)樗鼪]有被使用。
3. 這個(gè)內(nèi)部函數(shù)最后被返回，被引用，閉包就一直不會(huì)銷毀。

使用 DevTool 可以觀察到這個(gè)閉包對(duì)象：

所以，如果一個(gè)閉包返回的函數(shù)執(zhí)行完后不用了，要設(shè)置為 null。否則它關(guān)聯(lián)的閉包對(duì)象會(huì)一直在那里占用內(nèi)存。

多個(gè)內(nèi)部函數(shù)共享一個(gè)閉包對(duì)象

另外，如果有多個(gè)內(nèi)部函數(shù)，這些函數(shù)會(huì)共用同一個(gè)閉包對(duì)象。即使其中的一個(gè)內(nèi)部函數(shù)不會(huì)返回，它也會(huì)給閉包對(duì)象加?xùn)|西。

下面我們加了一個(gè) printOtherVal 的內(nèi)部函數(shù)，它并不返回，但還是會(huì)導(dǎo)致返回 counter 函數(shù)對(duì)應(yīng)的閉包對(duì)象帶上了它不需要的 otherVal 變量。

這是 JS 引擎處理閉包策略問題，理論不應(yīng)該有這樣奇怪的效果。

結(jié)尾

調(diào)用函數(shù)時(shí)，會(huì)產(chǎn)生調(diào)用棧，將當(dāng)前函數(shù)上下文入棧，會(huì)保存基本類型變量。引用變量會(huì)在堆內(nèi)存中創(chuàng)建，然后在棧內(nèi)存中引用過來。

因?yàn)?JavaScript 中函數(shù)是第一公民，所以會(huì)有閉包的概念。當(dāng)發(fā)現(xiàn)內(nèi)部函數(shù)，會(huì)創(chuàng)建一個(gè)閉包對(duì)象，將其中使用到的外部函數(shù)變量保存到該閉包對(duì)象下。之后內(nèi)部函數(shù)被調(diào)用時(shí)，就會(huì)從閉包里提取變量，如果找不到則從全局上下文提取。