// 当变量不再被引用时，它就成为了“垃圾”
let partyGuest = { name: "小明", drink: "可乐" };
partyGuest = null; // 现在{ name: "小明", drink: "可乐" }对象可以被回收了

let objA = { name: "对象A" }; // 引用计数: 1
let objB = objA; // 引用计数: 2
objA = null; // 引用计数: 1
objB = null; // 引用计数: 0 - 可以被回收了

function createCircularReference() {
    let obj1 = {};
    let obj2 = {};
    obj1.ref = obj2; // obj1引用obj2
    obj2.ref = obj1; // obj2引用obj1 - 形成循环引用
    // 即使函数执行完毕，引用计数都不为0
}

// 不小心创建的全局变量
function createLeak() {
    leak = "我一直在内存里赖着不走！"; // 没有var/let/const，成了全局变量
}


// 另一种情况：this指向全局
function carelessFunction() {
    this.globalVar = "我也是全局的！"; // 非严格模式下，this指向window
}

解决方法：

// 使用严格模式
"use strict";


function safeFunction() {
    let localVar = "我很安全，函数结束我就离开"; // 局部变量
}

场景2：被遗忘的定时器和回调函数

// 定时器泄露
let data = fetchHugeData(); // 大数据


setInterval(() => {
    let node = document.getElementById('myNode');
    if (node) {
        node.innerHTML = data; // data一直被引用，无法释放
    }
}, 1000);


// 即使移除DOM元素，定时器还在运行，data无法释放

解决方法：

场景3：脱离DOM的引用

// 保存DOM元素的引用
let elements = {
    button: document.getElementById('myButton'),
    image: document.getElementById('myImage')
};


// 从DOM中移除元素
document.body.removeChild(document.getElementById('myButton'));


// 但elements.button仍然引用着这个DOM元素
// 所以这个DOM元素和它关联的内存都无法释放

解决方法：

let elements = {
    button: document.getElementById('myButton')
};


// 移除元素时也清除引用
function removeButton() {
    document.body.removeChild(elements.button);
    elements.button = null; // 重要：清除引用
}

场景4：闭包的不当使用

// 闭包导致的内存泄露
function outerFunction() {
    let hugeData = new Array(1000000).fill("大数据");
    
    return function innerFunction() {
        // innerFunction闭包引用着hugeData
        console.log('我仍然可以访问hugeData');
        // 即使outerFunction执行完毕，hugeData也无法释放
    };
}


let keepAlive = outerFunction();
// keepAlive一直存在，hugeData就一直被引用

优化方案：

场景5：事件监听器不清理

// 添加事件监听
class MyComponent {
    constructor() {
        this.data = loadLargeData();
        this.handleClick = this.handleClick.bind(this);
        document.addEventListener('click', this.handleClick);
    }
    
    handleClick() {
        // 使用this.data
    }
    
    // 忘记移除事件监听器！
    // 即使组件实例不再需要，因为事件监听器还在，
    // this和this.data都无法被回收
}


let component = new MyComponent();
component = null; // 但事件监听器还在，内存泄露！

正确做法：

class MyComponent {
    constructor() {
        this.data = loadLargeData();
        this.handleClick = this.handleClick.bind(this);
        document.addEventListener('click', this.handleClick);
    }
    
    handleClick() {
        // 使用this.data
    }
    
    // 提供清理方法
    cleanup() {
        document.removeEventListener('click', this.handleClick);
        this.data = null;
    }
}


// 使用组件
let component = new MyComponent();
// 当组件不再需要时
component.cleanup();
component = null;

// 模拟内存泄露的函数
class MemoryLeakSimulator {
    constructor() {
        this.data = [];
        this.listeners = [];
    }
    
    addLeakyListener() {
        const listener = () => {
            console.log('数据长度:', this.data.length);
        };
        document.addEventListener('scroll', listener);
        this.listeners.push(listener);
    }
    
    addData() {
        // 每次添加1MB数据
        this.data.push(new Array(1024 * 1024 / 8).fill(0));
    }
    
    // 修复版本：正确清理
    cleanup() {
        this.listeners.forEach(listener => {
            document.removeEventListener('scroll', listener);
        });
        this.listeners = [];
        this.data = [];
    }
}