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

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

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

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

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

舉例說明一下：

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ù)，會產(chǎn)生如下的調(diào)用棧。

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

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

閉包的產(chǎn)生

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

例子：

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

const counter = createCounter();

console.log(counter());

執(zhí)行過程為：

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

使用 DevTool 可以觀察到這個閉包對象：

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

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

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

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

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

結(jié)尾

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

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

到此這篇關(guān)于詳解JavaScript中的閉包是如何產(chǎn)生的的文章就介紹到這了,更多相關(guān)JavaScript閉包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論