Javascript中如何实现函数缓存？函数缓存有哪些应用场景？

今天要聊的一个很经典的问题------如何在JavaScript中实现函数缓存，以及它有哪些应用场景。

我们先来明确一下，函数缓存 是什么。简单来说，函数缓存是将函数的运算结果存储起来，以便下次用到相同的输入时，可以直接返回结果，而不需要重新计算。这种方式可以理解为用空间换时间，也就是用缓存存储的空间，换取未来计算时间的节省。

先给个简单的代码例子让大家感受一下：

javascript 复制代码

const add = (a, b) => a + b;
const calc = memoize(add); // 创建一个支持缓存的函数
console.log(calc(10, 20)); // 输出 30
console.log(calc(10, 20)); // 直接从缓存中获取结果，输出 30

是不是很有意思？在这个例子中，calc函数并没有重复计算，而是利用缓存存储的结果直接返回。这种思路在性能优化中非常常见。接下来，我们来详细看看如何实现它。

函数缓存的实现，离不开JavaScript的几个核心概念：闭包、柯里化 和高阶函数。

首先说说闭包。闭包的本质是函数加上它能够访问的变量总和。闭包允许我们在一个函数的作用域中保持变量的引用。比如：

javascript 复制代码

function outer() {
    let a = 1;
    return function inner() {
        console.log(a); // 访问外部作用域的变量 a
    };
}

const func = outer();
func(); // 输出 1

在这里，inner函数形成了闭包，它能够访问到外部函数outer中的变量a。闭包为实现函数缓存提供了重要的基础------我们可以利用它保存计算结果。

接下来说柯里化。柯里化是一种把接收多个参数的函数转换为接收一个参数的函数的技巧。比如：

javascript 复制代码

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

console.log(add(3)(4)); // 输出 7

柯里化的好处是，我们可以延迟计算，或者分步计算，这对缓存机制的实现很有帮助。

最后是高阶函数。高阶函数是那些接收函数作为参数，或者返回一个函数的函数。比如：

javascript 复制代码

function withLogging(func) {
    return function (...args) {
        console.log(`Calling with ${args}`);
        return func(...args);
    };
}

const loggedAdd = withLogging((x, y) => x + y);
console.log(loggedAdd(2, 3)); // 输出日志并计算结果

高阶函数让我们可以灵活地扩展已有函数的功能，比如添加缓存逻辑。

结合这三个概念，我们可以实现一个通用的函数缓存工具，如下：

javascript 复制代码

function memoize(func) {
    const cache = new Map(); // 使用 Map 存储缓存
    return function (...args) {
        const key = JSON.stringify(args); // 将参数序列化为字符串作为键
        if (cache.has(key)) {
            console.log('从缓存中获取结果:', key);
            return cache.get(key);
        }
        const result = func(...args); // 调用原始函数计算结果
        cache.set(key, result); // 缓存结果
        return result;
    };
}

用法如下：

javascript 复制代码

const add = (a, b) => a + b;
const cachedAdd = memoize(add);

console.log(cachedAdd(10, 20)); // 输出 30
console.log(cachedAdd(10, 20)); // 从缓存中获取结果，输出 30

在这个实现中，我们用Map来存储缓存，key是序列化的参数值，这样可以保证每一组参数对应一个缓存结果。调用时，先检查缓存中是否存在结果，存在就直接返回，不存在就计算后存入缓存。

虽然函数缓存非常高效，但它并不适合所有场景。以下是一些常见的适用场景：

1、昂贵的函数调用：比如涉及复杂计算的场景。假设我们需要计算一个斐波那契数列的值：

javascript 复制代码

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

用递归计算时，很多输入会重复计算。通过缓存优化：

javascript 复制代码

const memoizedFib = memoize(fibonacci);
console.log(memoizedFib(40)); // 快速计算大值

2、输入有限且重复率高：比如函数的输入是有限的枚举值，且经常重复。例如，一个根据用户 ID 获取用户信息的函数：

javascript 复制代码

const getUserInfo = memoize((userId) => {
    console.log(`Fetching data for user ${userId}`);
    return { id: userId, name: `User${userId}` }; // 模拟 API 请求
});

console.log(getUserInfo(1));
console.log(getUserInfo(1)); // 第二次调用直接从缓存获取

3、纯函数的计算：纯函数是指对于相同输入，总是返回相同输出的函数，比如数学函数：

javascript 复制代码

const square = memoize((x) => x * x);
console.log(square(5)); // 输出 25
console.log(square(5)); // 从缓存中获取，输出 25

4、递归函数的优化：尤其是那些可以利用之前结果的递归场景，比如阶乘计算。

"函数缓存的实现可以依赖闭包、高阶函数和柯里化。核心思路是使用一个存储计算结果的缓存对象（比如Map），每次调用时先检查缓存中是否有结果，如果有则直接返回，否则进行计算并存储结果。"

然后给出简洁的实现代码：

javascript 复制代码

function memoize(func) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) return cache.get(key);
        const result = func(...args);
        cache.set(key, result);
        return result;
    };
}

最后补充应用场景，比如复杂计算（如递归函数）和高频调用的纯函数等，显示你的全面思考能力。这样，不仅技术点到位，还能展现你的工程实践思路。