本文旨在提供一种简洁高效的方法，用于在 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 装饰的新函数。
代码解释：
- 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 类属性缓存方案。在实际开发中，可以根据具体需求进行调整和优化，以达到最佳的性能和可维护性。
