面试题：JavaScript闭包与事件处理器结合中的内存问题

可能出现的内存泄漏场景

闭包引用外部变量导致的内存泄漏：当闭包长时间存在且引用了外部作用域中的变量，而这些变量本应在其作用域结束后被垃圾回收，但由于闭包的引用，这些变量无法被回收，从而导致内存泄漏。例如：

function outerFunction() {
    let largeObject = { /* 占用大量内存的对象 */ };
    return function innerFunction() {
        console.log(largeObject.someProperty);
    };
}
let closure = outerFunction();
// 即使outerFunction执行结束，largeObject也无法被垃圾回收，因为innerFunction闭包引用了它

事件处理器未解绑导致的内存泄漏：在Web应用中，如果给DOM元素添加了事件处理器，但在该DOM元素从文档中移除时没有解绑事件处理器，事件处理器依然会存在于内存中，同时它可能引用着DOM元素等其他对象，导致这些对象无法被垃圾回收，进而造成内存泄漏。例如：

<button id="myButton">Click me</button>
<script>
    let button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('Button clicked');
    });
    // 假设之后button元素从文档中移除，但事件处理器未解绑，就会造成内存泄漏
</script>

代码优化避免内存泄漏的方法及举例

解决闭包导致的内存泄漏：
- 尽量减少闭包对外部变量的引用。如果闭包只需要外部变量的部分数据，可以将这部分数据传递进来，而不是直接引用整个变量。例如：

function outerFunction() {
    let largeObject = { someProperty: 'value' };
    let propertyValue = largeObject.someProperty;
    return function innerFunction() {
        console.log(propertyValue);
    };
}
let closure = outerFunction();
// 此时largeObject可以在outerFunction执行结束后被垃圾回收，因为闭包只引用了一个简单值propertyValue

解决事件处理器未解绑导致的内存泄漏：
- 在移除DOM元素之前，先解绑事件处理器。例如：

<button id="myButton">Click me</button>
<script>
    let button = document.getElementById('myButton');
    let clickHandler = function () {
        console.log('Button clicked');
    };
    button.addEventListener('click', clickHandler);
    // 假设之后要移除button元素
    function removeButton() {
        button.removeEventListener('click', clickHandler);
        button.parentNode.removeChild(button);
    }
</script>

也可以使用addEventListener的第三个参数{ once: true }选项，这样事件处理器只会执行一次，执行后会自动解绑，避免内存泄漏。例如：

<button id="myButton">Click me</button>
<script>
    let button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('Button clicked');
    }, { once: true });
</script>

星途面试题库

面试题：JavaScript闭包与事件处理器结合中的内存问题

知识考点

面试题答案

可能出现的内存泄漏场景

代码优化避免内存泄漏的方法及举例