JavaScript中延迟加载属性模式怎么实现

这篇文章主要介绍了JavaScript中延迟加载属性模式怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript中延迟加载属性模式怎么实现文章都会有所收获，下面我们一起来看看吧。

10多年的许昌网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整许昌建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“许昌网站设计”,“许昌网站推广”以来，每个客户项目都认真落实执行。

传统上，开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性。对于在构造函数中随时可用的小块数据来说，这不是问题。但是，如果在实例中可用之前需要计算某些数据，您可能不想预先支付该费用。例如，考虑这个类：

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

在这里，data属性是作为执行一些昂贵计算的结果而创建的。如果您不确定是否会使用该属性，则预先执行该计算可能效率不高。幸运的是，有几种方法可以将这些操作推迟到以后。

按需属性模式

优化执行昂贵操作的最简单方法是等到需要数据后再进行计算。例如，您可以使用带有 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）。之后，返回值本身。下次data访问该属性时，它将从新创建的属性中读取而不是调用 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中延迟加载属性模式怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript中延迟加载属性模式怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。