js 闭包的内存泄漏解决方法

什么是内存泄露？

本质上，内存泄露可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只有开发者最清楚哪些内存不需要了，操作系统可以回收。一些编程语言提供了语言特性，可以帮助开发者做此类事情。另一些则寄希望于开发者对内存是否需要清晰明了。

三种类型的常见 JavaScript 内存泄露

• 1：意外的全局变量
• 2：被遗忘的计时器或回调函数
• 3：脱离 DOM 的引用
• 4：闭包

1 存在内存泄露问题的代码

循环p元素的时候，会在存在中产生一个副本p，不销毁的，会一直存在于内中，造成占内存。

####html
<p class="example1">使用 class="example1" 的标题</p>
<p class="example">使用 class="example" 的段落</p> 

####js
let ps=document.querySelectorAll('p')
ps.forEach(function(item){

    item.addEventListener('click',function(){
                let cls=item.getAttribute('class');
        // console.log(item.getAttribute('class'));
        console.log(cls)
    })
})

2 优化方案

当循环开始，把想要获取的class 用变量保存起来，然后等循环结束之后，把内存的副本p清空掉，这样副本就不会存在，然后获取class也不会手影响。

####html
<p class="example1">使用 class="example1" 的标题</p>
<p class="example">使用 class="example" 的段落</p> 

####js
let ps=document.querySelectorAll('p')
ps.forEach(function(item){  //循环地址，会在内存中复制一个p的副本，相当于存在两种p元素了
let cls=item.getAttribute('class');
    item.addEventListener('click',function(){
        // console.log(item.getAttribute('class'));
        console.log(cls)
    })
    item=null
})

效果图

image.png