站長(zhǎng)資訊網(wǎng)
閉包，是JS中的一大難點(diǎn)；網(wǎng)上有很多關(guān)于閉包會(huì)造成內(nèi)存泄露的描述，說(shuō)閉包會(huì)使其中的變量的值始終保持在內(nèi)存中，一般都不太推薦使用閉包
而項(xiàng)目中確實(shí)有很多使用閉包的場(chǎng)景，比如函數(shù)的節(jié)流與防抖
那么閉包用多了，會(huì)造成內(nèi)存泄露嗎？
場(chǎng)景思考
以下案例： A 頁(yè)面引入了一個(gè) debounce 防抖函數(shù)，跳轉(zhuǎn)到 B 頁(yè)面后，該防抖函數(shù)中閉包所占的內(nèi)存會(huì)被 gc 回收嗎？
該案例中，通過(guò)變異版的防抖函數(shù)來(lái)演示閉包的內(nèi)存回收，此函數(shù)中引用了一個(gè)內(nèi)存很大的對(duì)象 info（42M的內(nèi)存），便于明顯地對(duì)比內(nèi)存的前后變化
注：可以使用 Chrome 的 Memory 工具查看頁(yè)面的內(nèi)存大小：
場(chǎng)景步驟：
1） util.js 中定義了 debounce 防抖函數(shù)
// util.js`let info = { arr: new Array(10 * 1024 * 1024).fill(1), timer: null};export const debounce = (fn, time) => { return function (...args) { info.timer && clearTimeout(info.timer); info.timer = setTimeout(() => { fn.apply(this, args); }, time); }; };
2） A 頁(yè)面中引入并使用該防抖函數(shù)
import { debounce } from './util';mounted() { this.debounceFn = debounce(() => { console.log('1'); }, 1000) }
- 抓取 A 頁(yè)面內(nèi)存：
57.1M
3） 從 A 頁(yè)面跳轉(zhuǎn)到 B 頁(yè)面，B 頁(yè)面中沒(méi)有引入該 debounce 函數(shù)
問(wèn)題： 從 A 跳轉(zhuǎn)到 B 后，該函數(shù)所占的內(nèi)存會(huì)被釋放掉嗎？
- 此時(shí)，抓取 B 頁(yè)面內(nèi)存：
58.1M
- 刷新 B 頁(yè)面，該頁(yè)面的原始內(nèi)存為：
16.1M
結(jié)論： 前后對(duì)比發(fā)現(xiàn)，從 A 跳轉(zhuǎn)到 B 后，B 頁(yè)面內(nèi)存增大了 42M，證明該防抖函數(shù)所占的內(nèi)存沒(méi)有被釋放掉，即造成了內(nèi)存泄露
為什么會(huì)這樣呢？ 按理說(shuō)跳轉(zhuǎn) B 頁(yè)面后，A 頁(yè)面的組件都被銷(xiāo)毀掉了，那么 A 頁(yè)面所占的內(nèi)存應(yīng)該都被釋放掉了啊?
我們繼續(xù)對(duì)比測(cè)試
4） 如果把 info 對(duì)象放到 debounce 函數(shù)內(nèi)部，從 A 跳轉(zhuǎn)到 B 后，該防抖函數(shù)所占的內(nèi)存會(huì)被釋放掉嗎？
// util.js`export const debounce = (fn, time) => { let info = { arr: new Array(10 * 1024 * 1024).fill(1), timer: null }; return function (...args) { info.timer && clearTimeout(info.timer); info.timer = setTimeout(() => { fn.apply(this, args); }, time); }; };
按照步驟 4 的操作，重新從 A 跳轉(zhuǎn)到 B 后，B 頁(yè)面抓取內(nèi)存為16.1M，證明該函數(shù)所占的內(nèi)存被釋放掉了
為什么只是改變了 info 的位置，會(huì)引起內(nèi)存的前后變化？
要搞懂這個(gè)問(wèn)題，需要理解閉包的內(nèi)存回收機(jī)制
閉包簡(jiǎn)介
閉包：一個(gè)函數(shù)內(nèi)部有外部變量的引用，比如函數(shù)嵌套函數(shù)時(shí)，內(nèi)層函數(shù)引用了外層函數(shù)作用域下的變量，就形成了閉包。最常見(jiàn)的場(chǎng)景為：函數(shù)作為一個(gè)函數(shù)的參數(shù)，或函數(shù)作為一個(gè)函數(shù)的返回值時(shí)
閉包示例：
function fn() { let num = 1; return function f1() { console.log(num); };} let a = fn();a();
上面代碼中，a 引用了 fn 函數(shù)返回的 f1 函數(shù)，f1 函數(shù)中引入了內(nèi)部變量 num，導(dǎo)致變量 num 滯留在內(nèi)存中
打斷點(diǎn)調(diào)試一下
展開(kāi)函數(shù) f 的 Scope（作用域的意思）選項(xiàng)，會(huì)發(fā)現(xiàn)有 Local 局部作用域、Closure 閉包、Global 全局作用域等值，展開(kāi) Closure，會(huì)發(fā)現(xiàn)該閉包被訪問(wèn)的變量是 num，包含 num 的函數(shù)為 fn
總結(jié)來(lái)說(shuō)，函數(shù) f 的作用域中，訪問(wèn)到了fn 函數(shù)中的 num 這個(gè)局部變量，從而形成了閉包
所以，如果真正理解好閉包，需要先了解閉包的內(nèi)存引用，并且要先搞明白這幾個(gè)知識(shí)點(diǎn)：
- 函數(shù)作用域鏈
- 執(zhí)行上下文
- 變量對(duì)象、活動(dòng)對(duì)象
函數(shù)的內(nèi)存表示
先從最簡(jiǎn)單的代碼入手，看下變量是如何在內(nèi)存中定義的
let a = '小馬哥'
這樣一段代碼，在內(nèi)存里表示如下
在全局環(huán)境 window 下，定義了一個(gè)變量 a，并給 a 賦值了一個(gè)字符串，箭頭表示引用
再定義一個(gè)函數(shù)
let a = '小馬哥'function fn() { let num = 1}
內(nèi)存結(jié)構(gòu)如下：
特別注意的是，fn 函數(shù)中有一個(gè) [[scopes]] 屬性，表示該函數(shù)的作用域鏈，該函數(shù)作用域指向全局作用域（瀏覽器環(huán)境就是 window），函數(shù)的作用域是理解閉包的關(guān)鍵點(diǎn)之一
請(qǐng)謹(jǐn)記：函數(shù)的作用域鏈?zhǔn)窃趧?chuàng)建時(shí)就確定了，JS 引擎會(huì)創(chuàng)建函數(shù)時(shí)，在該對(duì)象上添加一個(gè)名叫作用域鏈的屬性，該屬性包含著當(dāng)前函數(shù)的作用域以及父作用域，一直到全局作用域
函數(shù)在執(zhí)行時(shí)，JS 引擎會(huì)創(chuàng)建執(zhí)行上下文，該執(zhí)行上下文會(huì)包含函數(shù)的作用域鏈（上圖中紅色的線），其次包含函數(shù)內(nèi)部定義的變量、參數(shù)等。在執(zhí)行時(shí)，會(huì)首先查找當(dāng)前作用域下的變量，如果找不到，就會(huì)沿著作用域鏈中查找，一直到全局作用域
垃圾回收機(jī)制淺析
現(xiàn)在各大瀏覽器通常用采用的垃圾回收有兩種方法：標(biāo)記清除、引用計(jì)數(shù)
這里重點(diǎn)介紹 "引用計(jì)數(shù)"（reference counting），JS 引擎有一張"引用表"，保存了內(nèi)存里面所有的資源（通常是各種值）的引用次數(shù)。如果一個(gè)值的引用次數(shù)是0，就表示這個(gè)值不再用到了，因此可以將這塊內(nèi)存釋放
上圖中，左下角的兩個(gè)值，沒(méi)有任何引用，所以可以釋放
如果一個(gè)值不再需要了，引用數(shù)卻不為0，垃圾回收機(jī)制無(wú)法釋放這塊內(nèi)存，從而導(dǎo)致內(nèi)存泄漏
判斷一個(gè)對(duì)象是否會(huì)被垃圾回收的標(biāo)準(zhǔn)： 從全局對(duì)象 window 開(kāi)始，順著引用表能找到的都不是內(nèi)存垃圾，不會(huì)被回收掉。只有那些找不到的對(duì)象才是內(nèi)存垃圾，才會(huì)在適當(dāng)?shù)臅r(shí)機(jī)被 gc 回收
分析內(nèi)存泄露的原因
回到最開(kāi)始的場(chǎng)景，當(dāng) info 在 debounce 函數(shù)外部時(shí)，為什么會(huì)造成內(nèi)存泄露？
進(jìn)行斷點(diǎn)調(diào)試
展開(kāi) debounce 函數(shù)的 Scope選項(xiàng)，發(fā)現(xiàn)有兩個(gè) Closure 閉包對(duì)象，第一個(gè) Closure 中包含了 info 對(duì)象，第二個(gè) Closure 閉包對(duì)象，屬于 util.js 這個(gè)模塊
內(nèi)存結(jié)構(gòu)如下：
當(dāng)從 A 頁(yè)面切換到 B 頁(yè)面時(shí)，A 頁(yè)面被銷(xiāo)毀，只是銷(xiāo)毀了 debounce 函數(shù)當(dāng)前的作用域，但是 util.js 這個(gè)模塊的閉包卻沒(méi)有被銷(xiāo)毀，從 window 對(duì)象上沿著引用表依然可以查找到 info 對(duì)象，最終造成了內(nèi)存泄露
當(dāng) info 在 debounce 函數(shù)內(nèi)部時(shí)，進(jìn)行斷點(diǎn)調(diào)試
其內(nèi)存結(jié)構(gòu)如下：
當(dāng)從 A 頁(yè)面切換到 B 頁(yè)面時(shí)，A 頁(yè)面被銷(xiāo)毀，同時(shí)會(huì)銷(xiāo)毀 debounce 函數(shù)當(dāng)前的作用域，從 window 對(duì)象上沿著引用表查找不到 info 對(duì)象，info 對(duì)象會(huì)被 gc 回收
閉包內(nèi)存的釋放方式
1、手動(dòng)釋放（需要避免的情況）
如果將閉包引用的變量定義在模塊中，這種會(huì)造成內(nèi)存泄露，需要手動(dòng)釋放，如下所示，其他模塊需要調(diào)用 clearInfo 方法，來(lái)釋放 info 對(duì)象
可以說(shuō)這種閉包的寫(xiě)法是錯(cuò)誤的 （不推薦）， 因?yàn)殚_(kāi)發(fā)者需要非常小心，否則稍有不慎就會(huì)造成內(nèi)存泄露，我們總是希望可以通過(guò) gc 自動(dòng)回收，避免人為干涉
let info = { arr: new Array(10 * 1024 * 1024).fill(1), timer: null};export const debounce = (fn, time) => { return function (...args) { info.timer && clearTimeout(info.timer); info.timer = setTimeout(() => { fn.apply(this, args); }, time); }; };export const clearInfo = () => { info = null; };
2、自動(dòng)釋放（大多數(shù)的場(chǎng)景）
閉包引用的變量定義在函數(shù)中，這樣隨著外部引用的銷(xiāo)毀，該閉包就會(huì)被 gc 自動(dòng)回收 （推薦），無(wú)需人工干涉
export const debounce = (fn, time) => { let info = { arr: new Array(10 * 1024 * 1024).fill(1), timer: null }; return function (...args) { info.timer && clearTimeout(info.timer); info.timer = setTimeout(() => { fn.apply(this, args); }, time); }; };
結(jié)論
綜上所述，項(xiàng)目中大量使用閉包，并不會(huì)造成內(nèi)存泄漏，除非是錯(cuò)誤的寫(xiě)法
絕大多數(shù)情況，只要引用閉包的函數(shù)被正常銷(xiāo)毀，閉包所占的內(nèi)存都會(huì)被 gc 自動(dòng)回收。特別是現(xiàn)在 SPA 項(xiàng)目的盛行，用戶在切換頁(yè)面時(shí)，老頁(yè)面的組件會(huì)被框架自動(dòng)清理，所以我們可以放心大膽的使用閉包，無(wú)需多慮
理解了閉包的內(nèi)存回收機(jī)制，才算徹底搞懂了閉包。以上關(guān)于閉包的理解，如果有誤，歡迎指正
推薦學(xué)習(xí)：《JavaScript視頻教程》
