J*aScript 类中缓存属性的优雅处理方案_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 类中缓存属性的优雅处理方案

2025-10-28

浏览次数：次

返回列表

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

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

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

缓存函数装饰器

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

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

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

代码解释：

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 装饰的新函数。

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

代码解释：

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...，后续调用直接使用了缓存。

总结与注意事项

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

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

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

# 可选 # 网络推广营销市场分析 # 玉溪网站优化运营 # 云南seo培训去哪里学 # 推广网站源代码 # 北京seo -baijiahao # 营销推广系统服务商 # 揭阳网站建设优化 # 巴塘抖音seo # 泰州微商网站推广 # 义乌靠谱网站建设收费 # 有什么不同 # 可以根据 # javascript # 只需要 # 我们可以 # 是在 # 是一个 # 类中 # 小爱 # 运算符 # app # json # js # java

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：解决Chrome扩展程序中HTML按钮事件触发与CSP限制的最佳实践

下一篇：使用Vuetify构建WYSIWYG编辑器：从基础到进阶

首页

关于我们

产品展示

咨询研究

新闻中心

留言板