閉包內存查看 · 前端知識 -- 學習整理

>[success] # 閉包內存 1. 閉包會產生作用域不會被釋放，站在之前`js執行上下文`章節來看，每次函數執行時候，無論是**ES3規范**還是**新的ES規范**，函數都會在執行時候開辟屬于當前執行時候的內存空間，然后銷毀。閉包由于內部引用了外部導致無法銷毀 * 圖解，不停調用`a()` 會被釋放，只是創建的指向 a的`bFun` 不會被釋放 ![](https://img.kancloud.cn/98/90/9890e3364b7f0a96eb1497016eaf3765_550x192.png) >[danger] ##### 通過案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button class="create">創建一系列的數組對象</button> <button class="createNot">創建一系列的非閉包</button> <button class="destroy">銷毀一系列的數組對象</button> <script> // 閉包 function createArray() { // 4 1024 -> 4kb * 1024 -> 4M var arr = new Array(1024 * 1024).fill(1) function test() { console.log(arr) } return test } // 非閉包 function createNotArray() { // 4 1024 -> 4kb * 1024 -> 4M var arr = new Array(1024 * 1024).fill(1) } // 點擊按鈕 var totalArr = [] var createBtnEl = document.querySelector('.create') var createNotBtnEl = document.querySelector('.createNot') var destroyBtnEl = document.querySelector('.destroy') // 非閉包 createNotBtnEl.onclick = function () { for (var i = 0; i < 100; i++) { // 記錄每一閉包一直被引用的函數 createNotArray() } } // 閉包 createBtnEl.onclick = function () { for (var i = 0; i < 100; i++) { // 記錄每一閉包一直被引用的函數 totalArr.push(createArray()) totalArr[i]() } } destroyBtnEl.onclick = function () { for (var i = 0; i < 100; i++) { // 記錄每一閉包一直被引用的函數 totalArr[i] = null } } </script> </body> </html> ~~~ * 如圖（使用銷毀沒有釋放后續再看） ![](https://img.kancloud.cn/87/83/878307a5354f95af70aa51f1ca1704b2_878x418.png)