本文旨在提供一种简洁高效的方法，用于在 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 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 cacheconsole.log(obj.factorial(10)); // Uses the cache
在上面的示例中，divisors 和 factorial 方法都被 enableCacheOnMethods 函数装饰，因此它们的结果会被缓存。当我们多次调用这些方法时，只有第一次调用会执行实际的计算，后续的调用会直接从缓存中获取结果。
运行结果：
executing divisors(15)3 5executing divisors(48)2 3 4 6 8 12 16 24 48executing factorial(10)36288003 53628800
可以看到，divisors(15) 和 factorial(10) 只在第一次调用时输出了 executing…，后续调用直接使用了缓存。
总结与注意事项
简洁性： 使用装饰器模式可以显著减少代码冗余，提高代码的可读性和可维护性。适用性： 这种方法适用于任何只需要计算一次的属性，尤其是在计算成本较高的情况下。缓存键的生成： 缓存键的生成需要考虑函数的参数和执行上下文。如果参数是对象或数组，需要进行深拷贝，以避免缓存污染。缓存失效： 在某些情况下，缓存可能需要失效。例如，当依赖的数据发生变化时，需要清除缓存，以确保结果的正确性。可以根据实际需求添加缓存失效机制。性能考虑： 虽然缓存可以提高性能，但缓存本身也会带来一定的开销。需要权衡缓存的收益和开销，避免过度使用缓存。
通过本文的介绍，相信你已经掌握了一种优雅的 JavaScript 类属性缓存方案。在实际开发中，可以根据具体需求进行调整和优化，以达到最佳的性能和可维护性。
以上就是JavaScript 类中缓存属性的优雅处理方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533126.html
微信扫一扫 
支付宝扫一扫 
