优化 J*aScript 类中缓存属性处理的实用技巧_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

优化 J*aScript 类中缓存属性处理的实用技巧

2025-10-28

浏览次数：次

返回列表

优化 JavaScript 类中缓存属性处理的实用技巧

本文旨在提供一种更简洁高效的方法来处理 j*ascript 类中需要缓存的属性。通过使用装饰器和对象包装，可以避免冗余的代码，并利用 `??=` 运算符简化缓存逻辑。本文将详细介绍如何实现并应用这些技术，从而提高代码的可维护性和可读性。

在 J*aScript 类中，经常会遇到需要缓存计算结果的情况，以避免重复计算。一种常见的实现方式是在方法内部检查缓存变量是否存在，如果不存在则进行计算并将结果存储到缓存变量中。然而，当类中存在大量需要缓存的方法时，这种方式会导致大量的重复代码，降低代码的可读性和可维护性。本文将介绍一种使用装饰器和对象包装来简化缓存逻辑的方法。 ### 使用装饰器实现缓存为了避免在每个方法中重复编写缓存逻辑，我们可以创建一个装饰器函数 `enableCache`，该函数接受一个函数作为参数，并返回一个带有缓存功能的新函数。 ```j*ascript function enableCache(func) { const cache = {}; return function(...args) { const key = JSON.stringify([this, ...args]); if (!cache[key]) { cache[key] = { value: func.apply(this, args) }; } return cache[key].value; }; }

这个 enableCache 函数的核心在于：

cache 对象： 用于存储缓存结果，键是函数调用参数的序列化字符串，值是一个包含 value 属性的对象，value 属性存储实际的计算结果。
参数序列化： 使用 JSON.stringify([this, ...args]) 将 this 上下文和函数参数序列化成字符串，作为缓存的键。这允许我们基于不同的 this 上下文和参数缓存不同的结果。
??= 运算符： 使用 cache[key] ??= { value: func.apply(this, args) } 来简化缓存逻辑。如果 cache[key] 不存在（null 或 undefined），则会执行 func.apply(this, args) 计算结果，并将其存储到 cache[key].value 中。如果 cache[key] 已经存在，则直接返回 cache[key].value，避免重复计算。

将装饰器应用于类方法

为了将 enableCache 装饰器应用于类中的多个方法，我们可以创建一个 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]);
        }
    }
}

这个 enableCacheOnMethods 函数的工作原理如下：

获取原型对象： cls.prototype 获取类的原型对象，原型对象上包含了类的所有方法。
遍历方法： Object.getOwnPropertyNames(obj) 获取原型对象上的所有属性名，然后遍历这些属性名。
判断是否为方法： typeof obj[method] === "function" && method !== "constructor" 判断当前属性是否为函数且不是构造函数。
应用装饰器： obj[method] = enableCache(obj[method]) 将 enableCache 装饰器应用于当前方法，并将装饰后的函数重新赋值给原型对象上的该方法。

示例代码

以下是一个完整的示例代码，演示了如何使用 enableCache 装饰器和 enableCacheOnMethods 函数来简化类中缓存属性的处理。

Yes!SUN企业网站系统 3.5 Build 20100303

Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表

0 查看详情 Yes!SUN企业网站系统 3.5 Build 20100303

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

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]);
        }
    }
}

// Demo
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 方法都被 enableCache 装饰器装饰，这意味着它们的结果会被缓存。当我们第一次调用这些方法时，它们会执行计算并将结果存储到缓存中。当我们再次调用这些方法时，它们会直接从缓存中返回结果，而不会再次执行计算。

注意事项

缓存键的选择： 缓存键的选择至关重要。在上面的示例中，我们使用 JSON.stringify([this, ...args]) 将 this 上下文和函数参数序列化成字符串作为缓存键。这种方法适用于大多数情况，但如果函数参数包含循环引用的对象或无法序列化的对象，则可能会导致错误。在这种情况下，我们需要选择更合适的缓存键。
缓存失效： 缓存应该在适当的时候失效，以避免缓存过期的数据。在上面的示例中，缓存永远不会失效。如果我们需要缓存的数据会发生变化，则需要实现缓存失效机制。
性能考虑： 虽然缓存可以提高性能，但也会带来额外的开销。我们需要权衡缓存带来的性能提升和缓存带来的额外开销。