当前位置：首页 > news >正文

大白话JavaScript闭包在实际项目中有哪些应用场景？

news 来源：原创 2025/5/9 1:37:28

大白话JavaScript闭包在实际项目中有哪些应用场景？

闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中，闭包有很多应用场景，以下是一些常见的例子：

数据封装和隐私保护

场景：在开发中，有时希望某些数据只能在特定的函数内部被访问和修改，对外界是隐藏的，就像把一些东西放在一个私密的小房间里，只有特定的方法才能进去操作它们。
示例

function createCounter() {
    // 私有变量，外部无法直接访问
    let count = 0; 

    return {
        // 可以访问和修改count的函数
        increment() { 
            count++;
            console.log(count);
        },
        getCount() { 
            return count;
        }
    };
}

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

解释：在这个例子中，count 变量被封装在 createCounter 函数内部，通过闭包，increment 和 getCount 函数可以访问和操作 count，但外部代码无法直接访问 count，实现了数据的封装和隐私保护。

函数柯里化

场景：当有一个函数需要接收多个参数，但有时希望先传递一部分参数，然后在后续的操作中再传递剩下的参数，就好像分批处理参数一样。
示例

function add(x) {
    return function(y) {
        return x + y;
    };
}

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

解释：这里的 add 函数返回了一个内部函数，内部函数可以访问 add 函数的参数 x，形成了闭包。通过这种方式，可以先固定一个参数，然后再传入另一个参数进行计算，提高了函数的灵活性和复用性。

事件处理函数

场景：在网页开发中，给按钮等元素添加点击事件时，常常需要在事件处理函数中保存一些状态信息。
示例

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

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

<body>
    <button id="btn">点击我</button>

    <script>
        function createClickHandler(message) {
            return function() {
                console.log(message);
            };
        }

        const btn = document.getElementById('btn');
        // 创建点击事件处理函数，并传入特定的消息
        const clickHandler = createClickHandler('按钮被点击了！'); 
        btn.addEventListener('click', clickHandler);
    </script>

</body>

</html>

解释：createClickHandler 函数返回的事件处理函数通过闭包记住了传入的 message 参数。当按钮被点击时，就能正确地显示出相应的消息，即使 createClickHandler 函数已经执行完毕，message 参数也不会被释放。

缓存数据

场景：在一些需要频繁计算或获取数据的场景中，希望把计算结果或获取到的数据缓存起来，下次需要时直接使用，避免重复计算或请求。
示例

function dataFetcher() {
    // 用于缓存数据的对象
    let cache = {}; 

    return function(url) {
        if (cache[url]) {
            // 如果数据已经在缓存中，直接返回缓存中的数据
            return cache[url]; 
        } else {
            // 假设这里是实际的网络请求获取数据
            const data = fetchDataFromServer(url); 
            // 将获取到的数据存入缓存
            cache[url] = data; 
            return data;
        }
    };
}

const fetchData = dataFetcher();
const data1 = fetchData('https://example.com/api/data1');
const data2 = fetchData('https://example.com/api/data2');
const data1Again = fetchData('https://example.com/api/data1'); 

function fetchDataFromServer(url) {
    // 这里模拟从服务器获取数据
    console.log(`从服务器获取数据：${url}`);
    return `模拟数据：${url}`;
}