Shulou(Shulou.com)05/31 Report--

This article mainly introduces the JavaScript delayed loading attribute mode how to achieve the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you read this JavaScript delayed loading attribute mode how to achieve the article will have a harvest, let's take a look at it.

Traditionally, developers have created properties in the JavaScript class for any data that might be needed in the instance. This is not a problem for small chunks of data that are readily available in the constructor. However, if you need to calculate some data before it is available in the instance, you may not want to pay the fee in advance. For example, consider this class:

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

In this case, the data property is created as a result of performing some expensive calculations. If you are not sure whether this property will be used, it may not be efficient to perform the calculation in advance. Fortunately, there are several ways to postpone these operations until later.

On-demand attribute mode

The easiest way to optimize the execution of expensive operations is to wait until data is needed before calculating. For example, you can use the accessor property with getter to calculate on demand, as follows:

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

In this case, your expensive computation won't happen until someone reads the data property for the first time, which is an improvement. However, each time data reads the property, the same expensive calculation is performed, which is worse than the previous example, where the calculation is performed at least once. This is not a good solution, but you can create a better solution based on it.

Messy delayed loading attribute mode

Performing calculations only when accessing properties is a good start. What you really need is to cache the information after that point and use only the cached version. But where do you cache this information for easy access? The easiest way is to define an attribute with the same name and set its value to the calculated data, as follows:

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

In this case, the data property is again defined as getter on the class, but this time it caches the result. Call Object.defineProperty () to create a new property named data, which has a fixed value of actualData and is set to non-writable, configurable, and non-enumerable (to match getter). After that, the value itself is returned. The next time data accesses this property, it will read from the newly created property instead of calling getter:

Const object = new MyClass (); / / calls the getterconst data1 = object.data; / / reads from the data propertyconst data2 = object.data

In fact, all calculations are done only the first time data reads the attribute. Each subsequent read of the data property returns the cached version.

One drawback of this pattern is that the data property starts as an unenumerable prototype property and ends up as its own property that cannot be enumerated:

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

While this distinction is not important in many cases, it is important to understand this pattern because it can cause subtle problems when passing objects. Fortunately, it is easy to solve this problem with newer patterns.

Class's only own deferred loading property mode

If you have a use case where it is important that delayed-loaded properties always exist in the instance, you can use Object.defineProperty () to create properties in the class constructor. It is a bit confusing than the previous example, but it ensures that the property exists only on the instance. Here is an example:

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

Here, the constructor data uses Object.defineProperty (). This property is created on the instance (by using this) and defines a getter and specifies that the property is enumerable and configurable (typically your own). It is particularly important to set the data property to configurable so that you can Object.defineProperty () call it again.

The getter function then calculates and calls Object.defineProperty () again. The data property is now redefined as a data property with a specific value and is not writable and configurable to protect the final data. The calculated data is then returned from the getter. The next time data reads an attribute, it will read from the stored value. As a reward, the data property now exists only as its own property, and behaves the same before and after the first reading:

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

For classes, this is probably the pattern you want to use; on the other hand, object literals can be used in a simpler way.

Delayed loading attribute mode of object literals

If you use an object literal instead of a class, the process is much simpler because the getter defined on the object literal is defined as an enumerable own property (rather than a prototype property), just like a data property. This means that you can use a messy deferred load property pattern for classes without clutter for objects:

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's article on "how to implement the deferred loading attribute pattern in JavaScript" ends here, thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to implement the delayed loading attribute mode in JavaScript". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.