JavaScript 延迟加载属性模式详解：优化昂贵计算与缓存策略

一、前言

在传统的 JavaScript 开发中，开发人员习惯在类定义时为所有可能需要的实例数据预先创建属性。对于构造函数中即可获取的小型数据块，这种做法通常没有问题。然而，如果某些数据的可用性依赖于后续计算，预先执行这些操作可能会导致不必要的性能开销。例如，参考以下类定义：


class MyClass {
    constructor() {
        this.data = someExpensiveComputation();
    }
}

在上述代码中，data 属性是通过执行一项昂贵的计算操作生成的。如果在实例化后并不确定该属性是否会被使用，预先执行此项计算显然是低效的。幸运的是，JavaScript 提供了多种机制，允许我们将此类操作推迟到真正需要时再执行。

二、按需属性模式

优化昂贵计算最简单直观的方法，是将计算过程推迟到数据被实际请求的时刻。具体实现上，可以利用带有 getter 的访问器属性来按需触发计算，代码示例如下：


class MyClass {
    get data() {
        return someExpensiveComputation();
    }
}

在此实现中，昂贵的计算逻辑仅在第一次读取 data 属性时触发，这相比预先计算是一个明显的改进。然而，问题在于每次读取 data 属性时，都会重新执行相同的昂贵计算。这实际上比之前的示例更糟糕，因为之前的方案至少只执行了一次计算。虽然这不是一个理想的解决方案，但它为构建更完善的方案提供了基础。

三、凌乱的延迟加载属性模式

仅在访问属性时执行计算是一个良好的开端，但更理想的状态是在首次计算后缓存结果，并在后续访问中直接返回缓存值。关键在于如何存储这些数据以便高效访问。最简单的方法是在类上定义一个同名的属性，将其值设为计算结果，具体实现如下：


class MyClass {
    get data() {
        const actualData = someExpensiveComputation();
 
        Object.defineProperty(this, "data", {
            value: actualData,
            writable: false,
            configurable: false,
            enumerable: false
        });
 
        return actualData;
    }
}

在此示例中，data 属性再次被定义为类上的 getter，但这次它负责缓存计算结果。当调用 Object.defineProperty() 时，它会创建一个名为 data 的新属性，其值固定为 actualData。该属性被设置为不可写、不可配置且不可枚举，以匹配原始 getter 的行为特征。随后，getter 返回计算后的值。当下次访问 data 属性时，JavaScript 引擎将直接读取新创建的属性，而不再调用 getter：


const object = new MyClass();
 
// calls the getter
const data1 = object.data;
 
// reads from the data property
const data2 = object.data;

通过这种方式，所有计算逻辑仅在第一次读取 data 属性时执行。此后对该 data 属性的任何读取操作，都将直接返回缓存的版本，从而显著提升性能。

然而，这种模式存在一个显著缺点：data 属性在初始状态下是不可枚举的原型属性，而在缓存发生后，它变成了不可枚举的自身属性：


const object = new MyClass();
console.log(object.hasOwnProperty("data"));     // false
 
const data = object.data;
console.log(object.hasOwnProperty("data"));     // true

尽管在许多应用场景中，这种枚举性的差异并不重要，但理解这一行为至关重要，因为在传递对象时可能会引发微妙的问题。幸运的是，通过采用更新后的模式，可以轻松解决这一问题。

四、类的唯一自己的延迟加载属性模式

如果应用场景要求延迟加载的属性必须始终作为实例的自身属性存在，可以使用 Object.defineProperty() 在类构造函数中直接创建该属性。虽然代码略显复杂，但它能确保属性仅存在于实例上，而不会污染原型链。示例如下：


class MyClass {
    constructor() {

        Object.defineProperty(this, "data", {
            get() {
                const actualData = someExpensiveComputation();

                Object.defineProperty(this, "data", {
                    value: actualData,
                    writable: false,
                    configurable: false
                });

                return actualData;
            },
            configurable: true,
            enumerable: true
        });

    }
}

在上述代码中，构造函数 data 利用 Object.defineProperty() 在实例初始化阶段定义属性。该属性直接在实例上创建（通过引用 this），并定义了一个 getter，同时指定该属性为可枚举和可配置（符合典型自身属性的特征）。将 data 属性设置为可配置尤为关键，这允许我们在后续步骤中再次调用 Object.defineProperty() 来重新定义它。

随后，getter 函数执行计算并再次调用 Object.defineProperty()。此时，data 属性被重新定义为具有特定值的数据属性，且设置为不可写和不可配置，以保护最终数据不被篡改。计算后的数据由 getter 返回。当下次读取 data 属性时，程序将直接从存储的值中读取。作为额外优势，data 属性现在仅作为自身属性存在，且在第一次读取前后的行为表现一致：


const object = new MyClass();
console.log(object.hasOwnProperty("data"));     // true
 
const data = object.data;
console.log(object.hasOwnProperty("data"));     // true

对于类定义而言，这很可能是推荐使用的模式；然而，对于对象字面量，还有更简洁的处理方式。

五、对象字面量的延迟加载属性模式

如果使用的是对象字面量而非类，处理过程要简单得多。因为在对象字面量中定义的 getter 被直接定义为可枚举的自身属性（而非原型属性），其行为与数据属性一致。这意味着，我们可以直接应用上述“凌乱”的延迟加载模式，而无需担心原型链问题，具体代码如下：


const object = {
    get data() {
        const actualData = someExpensiveComputation();
 
        Object.defineProperty(this, "data", {
            value: actualData,
            writable: false,
            configurable: false,
            enumerable: false
        });
 
        return actualData;
    }
};
 
console.log(object.hasOwnProperty("data"));     // true
 
const data = object.data;
console.log(object.hasOwnProperty("data"));     // true

六、结论

JavaScript 允许重新定义对象属性的能力，为缓存可能涉及高昂计算成本的信息提供了独特机会。通过从访问器属性开始，并在首次读取后将其重新定义为数据属性，我们可以将计算推迟到第一次访问时，并将结果缓存以供后续使用。这种方法既适用于类定义，也适用于对象字面量，且在对象字面量中的实现更为简洁，因为无需担忧 getter 落入原型链的问题。

提升程序性能的关键策略之一是避免重复执行相同的工作。因此，任何能够缓存结果以供后续使用的场景，都能有效加速程序运行。延迟加载属性模式等技术，使得任何属性都能成为一个高效的缓存层，从而提升整体性能。

以上就是浅谈 JavaScript 中延迟加载属性模式的详细内容，更多关于 JS 延迟加载属性模式的资料请关注本站其它相关文章！

JavaScript 延迟加载属性模式：从原型到实例的缓存优化