Bootstrap

JS 闭包内存泄漏的解决办法

让我们通过一个小案例来看看闭包内存泄漏造成什么问题:

案例:此时我们希望点击任意一个div,能在控制台中打印出相对于div的自定义属性值

HTML部分:

<div desc="我是Joker">Joker1</div>
<div desc="我也是Joker">Joker2</div>

JS部分:

 let divs = document.querySelectorAll("div");
    divs.forEach(function (item) {
        let desc = item.getAttribute("desc");
        item.addEventListener("click", function () {
            console.log(desc);
            console.log(item);
        });
    })

此时我们看到,我们除了得到getAttribute的值外,还获取到了item值,这个item值相对我们来说是没用的,但是它会占用我们的内存空间,因此我们可以对代码进行优化。

解决办法很简单:当我们获取到desc的值后,我们重新把item的值赋值为null,即手动清除内存,这样做能减轻内存的负担,也不影响我们的需求。

let divs = document.querySelectorAll("div");
    divs.forEach(function (item) {
        let desc = item.getAttribute("desc");
        item.addEventListener("click", function () {
            console.log(desc);
            console.log(item);
        });
        item = null
    })

;