改善性能的最好方法：JavaScript延迟执行属性

优化执行计算操作的最简单方法是等到需要数据后再进行计算。

例如，您可以使用带有getter的data属性来按需进行计算，如下所示：

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，并且被设置为不可写，不可配置和可枚举。

下次data访问该属性时，它将从新创建的属性中读取而不是调用getter：

const object = new MyClass(); 

// calls the getter 

const data1 = object.data; 

// reads from the data property 

const data2 = object.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()再次调用它。

（编辑：大连站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!