一、闭包是什么？一个简单的例子

function outer() {
    let me = '小杨';
    return function inner() {
        console.log(`大家好，我是${me}`);
    };
}
const sayHello = outer();
sayHello(); // "大家好，我是小杨"

看到没？inner函数记住了outer函数的me变量，这就是闭包！

二、闭包的三大妙用（天使面）

1. 创建私有变量

function createCounter() {
    let count = 0;
    return {
        increment() { count++ },
        getCount() { return count }
    };
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined

2. 实现函数柯里化

function multiply(a) {
    return function(b) {
        return a * b;
    };
}
const double = multiply(2);
console.log(double(5)); // 10

3. 事件处理中的妙用

function setupButtons() {
    for(var i = 1; i <= 3; i++) {
        (function(index) {
            document.getElementById(`btn-${index}`)
                .addEventListener('click', function() {
                    console.log(`我是按钮${index}`);
                });
        })(i);
    }
}

三、闭包的三大坑（魔鬼面）

1. 内存泄漏

function leakMemory() {
    const bigData = new Array(1000000).fill('*');
    return function() {
        console.log('我还记得bigData');
    };
}
const leaked = leakMemory();
// bigData本应该被回收，但闭包让它一直存在

2. 性能问题

function slowPerformance() {
    const data = {}; // 大对象
    return function(key, value) {
        data[key] = value;
        // 每次调用都要访问闭包变量
    };
}

3. 意外的变量共享

function createFunctions() {
    let funcs = [];
    for(var i = 0; i < 3; i++) {
        funcs.push(function() {
            console.log(i); // 全是3！
        });
    }
    return funcs;
}

四、闭包优化六大法则（6年经验总结）

1. 及时释放引用

function createHeavyObject() {
    const heavy = new Array(1000000).fill('*');
    return {
        useHeavy: function() {
            // 使用heavy
        },
        cleanup: function() {
            heavy = null; // 手动释放
        }
    };
}

2. 使用块级作用域

// 修复前面的共享变量问题
function createFixedFunctions() {
    let funcs = [];
    for(let i = 0; i < 3; i++) { // 使用let
        funcs.push(function() {
            console.log(i); // 0,1,2
        });
    }
    return funcs;
}

3. 避免不必要的闭包

// 不好的写法
function unneededClosure() {
    const data = {};
    return function() {
        // 根本不使用data，却形成了闭包
        console.log('Hello');
    };
}
// 好的写法
function noClosure() {
    console.log('Hello');
}

4. 使用WeakMap管理私有变量

const privateData = new WeakMap();
class MyClass {
    constructor() {
        privateData.set(this, {
            secret: '我是私有数据'
        });
    }
    
    getSecret() {
        return privateData.get(this).secret;
    }
}

5. 合理使用IIFE

// 立即执行函数减少闭包生命周期
(function() {
    const tempData = processData();
    // 使用tempData
})(); // 执行完立即释放

6. 使用模块化

// 模块化天然适合管理闭包
const counterModule = (function() {
    let count = 0;
    
    return {
        increment() { count++ },
        getCount() { return count }
    };
})();

五、真实案例分享

案例1：我曾经在项目中遇到一个页面卡顿问题，最后发现是因为一个事件处理函数形成了闭包，持有了一个大DOM树的引用。解决方案是：

// 修复前
function setup() {
    const bigElement = document.getElementById('big');
    button.addEventListener('click', function() {
        // 持有bigElement引用
        console.log(bigElement.id);
    });
}
// 修复后
function setup() {
    const id = 'big';
    button.addEventListener('click', function() {
        // 只存储需要的id
        console.log(id);
    });
}

六、总结

闭包就像一把双刃剑：
✅ 优点：实现私有变量、函数柯里化、模块化等
❌ 缺点：可能导致内存泄漏、性能问题

记住我的6年经验总结：

1. 及时释放不再需要的引用
2. 优先使用块级作用域
3. 避免不必要的闭包
4. 合理使用WeakMap和模块化
5. 善用开发者工具检查内存

转自https://juejin.cn/post/7512259761196957707