如何正确使用闭包来优化前端代码？

闭包在前端开发中是一个强大的工具，合理使用可以优化代码，以下是一些常见的使用场景及示例代码：

1. 数据封装与私有变量

闭包可以将数据封装在函数内部，避免全局变量污染，实现私有变量和方法。

javascript 复制代码

function createCounter() {
    let count = 0;
    return {
        increment: function () {
            count++;
            return count;
        },
        decrement: function () {
            count--;
            return count;
        },
        getValue: function () {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); 
console.log(counter.increment()); 
console.log(counter.decrement());

在上述代码中，count 变量被封装在 createCounter 函数内部，外部无法直接访问，只能通过返回对象的方法来操作和获取其值，实现了数据的封装和隐藏。

2. 事件处理与状态保持

在事件处理中，闭包可以用来保持特定的状态。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <script>
        function setupButton(id, message) {
            const button = document.getElementById(id);
            button.addEventListener('click', function () {
                alert(message);
            });
        }

        setupButton('button1', 'You clicked button 1');
        setupButton('button2', 'You clicked button 2');
    </script>
</body>

</html>

在这个例子中，setupButton 函数为每个按钮添加了点击事件处理程序。内部的匿名函数形成了闭包，它可以访问 message 参数，即使 setupButton 函数已经执行完毕，点击按钮时仍然能显示正确的消息。

3. 函数柯里化

柯里化是将一个多参数函数转换为一系列单参数函数的技术，闭包在其中起到了关键作用。

javascript 复制代码

function add(a, b) {
    if (b === undefined) {
        return function (b) {
            return a + b;
        };
    }
    return a + b;
}

const addFive = add(5);
console.log(addFive(3));

这里的 add 函数如果只传入一个参数，会返回一个新的函数，这个新函数会记住之前传入的参数，形成闭包。

4. 循环中的事件处理

在循环中使用闭包可以避免变量共享问题。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        const listItems = document.querySelectorAll('li');
        for (let i = 0; i < listItems.length; i++) {
            (function (index) {
                listItems[index].addEventListener('click', function () {
                    alert(`You clicked item ${index + 1}`);
                });
            })(i);
        }
    </script>
</body>

</html>

在这个例子中，使用立即执行函数表达式（IIFE）创建闭包，每个点击事件处理程序都有自己独立的 index 值，避免了循环结束后所有事件处理程序都使用相同的 i 值的问题。

5. 缓存计算结果

闭包可以用来缓存一些计算结果，避免重复计算。

javascript 复制代码

function memoize(func) {
    const cache = {};
    return function (arg) {
        if (cache[arg] === undefined) {
            cache[arg] = func(arg);
        }
        return cache[arg];
    };
}

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);
console.log(memoizedFactorial(5)); 
console.log(memoizedFactorial(5));

memoize 函数返回一个新的函数，这个新函数会记住之前的计算结果，当再次传入相同的参数时，直接从缓存中获取结果，避免了重复计算。

通过以上这些方式，你可以正确地使用闭包来优化前端代码，提高代码的可维护性和性能。