闭包内存查看 · 前端知识 -- 学习整理

>[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)