面试题：JavaScript中导致内存泄漏的常见闭包场景及如何避免

Question

请举例说明JavaScript中由于闭包可能导致内存泄漏的常见场景，并阐述如何避免在这些场景下出现内存泄漏问题。

Answer 1

常见场景

1. 事件绑定未解绑： 在DOM元素上绑定事件处理函数时，如果事件处理函数是一个闭包，并且在元素被移除时没有解绑事件，就可能导致内存泄漏。例如：

function setupElement() {
    const element = document.getElementById('myElement');
    const data = { /* 一些数据 */ };
    element.addEventListener('click', function() {
        // 这里闭包引用了外部的data
        console.log(data);
    });
    // 假设element被移除了，但事件处理函数由于闭包引用了data，仍然存在于内存中
    document.body.removeChild(element);
}

2. 定时器内部闭包： 当在定时器（setInterval或setTimeout）中使用闭包，且定时器没有被清除时，可能会导致内存泄漏。例如：

function startTimer() {
    const data = { /* 一些数据 */ };
    const intervalId = setInterval(() => {
        // 闭包引用了data
        console.log(data);
    }, 1000);
    // 如果没有清除定时器，即使不再需要data，由于闭包的存在，data也不会被垃圾回收
}

避免方法

1. 事件绑定未解绑场景： 在移除DOM元素之前，先解绑事件。可以使用removeEventListener方法。例如：

function setupElement() {
    const element = document.getElementById('myElement');
    const data = { /* 一些数据 */ };
    const handler = function() {
        console.log(data);
    };
    element.addEventListener('click', handler);
    // 移除元素前解绑事件
    document.body.removeChild(element);
    element.removeEventListener('click', handler);
}

2. 定时器内部闭包场景： 在合适的时机清除定时器。例如：

function startTimer() {
    const data = { /* 一些数据 */ };
    const intervalId = setInterval(() => {
        console.log(data);
    }, 1000);
    // 在不需要定时器时清除它
    setTimeout(() => {
        clearInterval(intervalId);
    }, 5000);
}