JS中常见的内存泄漏场景，你知道几个？

字数 642，阅读大约需 4 分钟

什么是内存泄漏

内存泄漏指程序中分配的内存没有被及时释放，导致内存占用不断增加。这会影响应用性能，甚至导致应用崩溃。
JavaScript中，需要特别注意避免内存泄漏。

常见内存泄漏场景

1. 全局变量

全局变量不会被垃圾回收机制自动清理。如果一个变量在函数外声明，但不再使用，这个变量就会一直占用内存。

• • 例子：

   function createGlobalVariable() {
    globalVar = 'This is a global variable';
}
createGlobalVariable();

这里globalVar是全局变量，即使函数执行完毕后，它仍然存在于内存中。

2. 闭包

闭包可以访问外部函数的作用域。如果闭包引用了外部作用域中的大对象，这些对象将不会被垃圾回收。

• • 例子：

   function outerFunction() {
    let largeArray = new Array(1000000).fill('a');
    return function innerFunction() {
        console.log(largeArray);
    }
}
const closure = outerFunction();

在这个例子中，largeArray通过闭包保持引用，不会被垃圾回收。

3. 未清除的定时器

定时器（如setTimeout或setInterval）如果没有正确清除，也会造成内存泄漏。

• • 例子：

   function setTimer() {
    setInterval(function() {
        console.log('Hello, world!');
    }, 1000);
}
setTimer();

这里的定时器会一直运行，除非手动清除。

4. 事件监听器

添加事件监听器后，如果不移除，即使DOM元素被删除，监听器仍会占用内存。

• • 例子：

   let element = document.getElementById('myElement');
element.addEventListener('click', function() {
    console.log('Element clicked');
});
// 后续代码中删除了element，但未移除事件监听器
document.body.removeChild(element);

5. 循环引用

两个对象互相引用时，垃圾回收机制无法识别它们是否还在使用，从而导致内存泄漏。

• • 例子：

   let obj1 = {};
let obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;

在这个例子中，obj1和obj2互相引用，形成循环引用，导致内存泄漏。

那么如何避免内存泄漏？
总共有下面几点：

• • 减少全局变量：尽量避免使用全局变量，或者在不需要时将其设置为null。
• • 清除定时器：使用完定时器后，记得调用clearTimeout或clearInterval。
• • 移除事件监听器：在不再需要监听器时，使用removeEventListener移除。
• • 解除循环引用：对于循环引用的情况，当然可以使用WeakMap或WeakSet来存储对象引用，这样让垃圾回收机制可以正常工作。

以上就是JavaScript中常见的内存泄漏原因及解决方法。希望对大家有所帮助。