JavaScript 类中缓存属性的优雅处理方案

本文旨在提供一种简洁高效的方法，用于在 JavaScript 类中处理需要缓存的属性。通过使用装饰器模式和空值合并运算符，我们可以避免冗余的缓存逻辑代码，提高代码的可读性和可维护性。文章将提供详细的代码示例和解释，帮助开发者轻松实现属性缓存。

在 JavaScript 类中，经常会遇到一些计算密集型的属性，它们的值只需要计算一次，后续的访问应该直接从缓存中获取。传统的实现方式是在每个方法中都重复编写缓存逻辑，导致代码冗余且难以维护。本文将介绍一种更优雅的解决方案，利用装饰器模式和空值合并运算符，简化缓存属性的处理。

缓存函数装饰器

首先，我们定义一个名为 enableCache 的函数，它接受一个函数作为参数，并返回一个经过缓存增强的新函数。

function enableCache(func) {
    const cache = {};
    return function(...args) {
        const key = JSON.stringify([this, ...args]);
        return (cache[key] ??= { value: func.apply(this, args) }).value;
    };
}

这个函数的核心在于利用了 JavaScript 的空值合并运算符 (??=)。当 cache[key] 为 null 或 undefined 时，??= 运算符才会执行右侧的表达式，即计算 func.apply(this, args) 的结果，并将其包装成一个包含 value 属性的对象，存储到 cache[key] 中。后续的调用会直接从 cache 中读取 value 属性，避免重复计算。

立即学习“Java免费学习笔记（深入）”；

代码解释：

• cache: 一个对象，用于存储缓存结果。键是函数参数的 JSON 字符串，值是一个包含 value 属性的对象，value 属性存储函数的返回值。
• JSON.stringify([this, ...args]): 将 this (函数执行的上下文) 和所有参数转换为 JSON 字符串，作为缓存的键。 this 的存在使得缓存能够区分不同实例的方法调用。
• cache[key] ??= { value: func.apply(this, args) }: 这是缓存的核心逻辑。如果 cache[key] 不存在，则执行 func.apply(this, args) 计算结果，并将其存储在 cache[key] 中。
• .value: 返回缓存的实际值。

应用装饰器到类方法

接下来，我们定义一个名为 enableCacheOnMethods 的函数，它接受一个类作为参数，并将 enableCache 装饰器应用到该类的所有方法上。

function enableCacheOnMethods(cls) {
    const obj = cls.prototype;
    for (const method of Object.getOwnPropertyNames(obj)) {
        if (typeof obj[method] === "function" && method !== "constructor") { // method of cls
            obj[method] = enableCache(obj[method]);
        }
    }
}

这个函数遍历类的原型对象上的所有属性，如果属性是一个函数且不是构造函数，则将其替换为经过 enableCache 装饰的新函数。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

代码解释：

• cls.prototype: 获取类的原型对象，原型对象包含类的所有方法。
• Object.getOwnPropertyNames(obj): 获取原型对象的所有属性名。
• typeof obj[method] === "function" && method !== "constructor": 检查属性是否为函数且不是构造函数。
• obj[method] = enableCache(obj[method]): 将原始方法替换为经过缓存装饰器处理后的新方法。

示例代码

现在，我们可以创建一个类，并使用 enableCacheOnMethods 函数来启用缓存。

class myClass {
    divisors(n) { // Example method (without caching)
        console.log(`executing divisors(${n})`);
        const arr = [];
        for (let i = 2; i <= n; i++) {
            if (n % i == 0) arr.push(i);
        }
        return arr;
    }
    factorial(n) { // Example method (without caching)
        console.log(`executing factorial(${n})`);
        let res = 1;
        while (n > 1) res *= n--;
        return res;
    }
}

enableCacheOnMethods(myClass);

let obj = new myClass;
console.log(...obj.divisors(15));
console.log(...obj.divisors(48));
console.log(obj.factorial(10));
console.log(...obj.divisors(15)); // Uses the cache
console.log(obj.factorial(10)); // Uses the cache

在上面的示例中，divisors 和 factorial 方法都被 enableCacheOnMethods 函数装饰，因此它们的结果会被缓存。当我们多次调用这些方法时，只有第一次调用会执行实际的计算，后续的调用会直接从缓存中获取结果。

运行结果：

executing divisors(15)
3 5
executing divisors(48)
2 3 4 6 8 12 16 24 48
executing factorial(10)
3628800
3 5
3628800

可以看到，divisors(15) 和 factorial(10) 只在第一次调用时输出了 executing...，后续调用直接使用了缓存。

总结与注意事项

• 简洁性： 使用装饰器模式可以显著减少代码冗余，提高代码的可读性和可维护性。
• 适用性： 这种方法适用于任何只需要计算一次的属性，尤其是在计算成本较高的情况下。
• 缓存键的生成： 缓存键的生成需要考虑函数的参数和执行上下文。如果参数是对象或数组，需要进行深拷贝，以避免缓存污染。
• 缓存失效： 在某些情况下，缓存可能需要失效。例如，当依赖的数据发生变化时，需要清除缓存，以确保结果的正确性。可以根据实际需求添加缓存失效机制。
• 性能考虑： 虽然缓存可以提高性能，但缓存本身也会带来一定的开销。需要权衡缓存的收益和开销，避免过度使用缓存。

通过本文的介绍，相信你已经掌握了一种优雅的 JavaScript 类属性缓存方案。在实际开发中，可以根据具体需求进行调整和优化，以达到最佳的性能和可维护性。

以上就是JavaScript 类中缓存属性的优雅处理方案的详细内容，更多请关注php中文网其它相关文章！