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

This article mainly introduces "how to use deferred loading attributes in JavaScript". In daily operation, I believe that many people have doubts about how to use delayed loading attributes in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use deferred loading attributes in JavaScript". Next, please follow the editor to study!

Scene

Sometimes you create properties inside the JavaScript class that hold any data that may be needed in the instance.

This is not a problem for small data that is readily available within the constructor.

However, if you need to calculate some big data before it is available in the instance, you may need to perform expensive calculations. For example, consider this:

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

In this case, the data property is created by performing some expensive calculations.

If you are not sure that this attribute will be used, it may not be good and inefficient to execute it in advance. Fortunately, here are several ways to postpone these operations.

Next, it is mainly expanded around the accessor properties of.

On-demand attribute mode

The easiest way to optimize the calculation operation is to wait until the data is needed.

For example, you can use the data property with getter to calculate on demand, as follows:

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

In this case, your expensive computation does not occur until someone reads the data property for the first time, which is an improvement.

However, it is also problematic that the same expensive calculation is performed each time the data reads the attribute, which is worse than the previous example, in which the calculation is performed at least once.

According to our analysis, this is not a good solution, so we can create a better solution on this basis.

Delayed load attribute mode

Performing a calculation only when accessing this property is a good start. What you really need is to cache the information after that, and then use only the cached data results.

However, there is a question for us to consider: 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;}}

Here, the data property is again defined as the getter of the class, but this time it will cache the result.

Call Object.defineProperty () to create a new property named data, which has a fixed value of actualData and is set to not writable, not configurable, and enumerable.

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 getter const data1 = object.data; / / reads from the data property const data2 = object.data

In fact, all calculations are done only the first time the data properties are read. Each subsequent read of the data property returns the cached version. The disadvantage of this mode is that the data property starts with an unenumerable prototype property and ends with 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

Although this distinction is not important in many cases, it is important to understand this pattern because it can cause minor problems when passing objects.

Fortunately, we can use the following pattern to solve this problem easily.

Deferred loading properties of the class

If you have an instance for which the presence of a delayed load property is important, you can use Object.defineProperty () to create the property inside the class constructor.

It is a bit confusing than the previous example, but it ensures that the property exists only on the instance. This 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});}}

We can see from this example that the constructor uses the create data accessor property Object.defineProperty (). This property is created on the instance (using this), defines a getter and specifies enumerable and configurable properties.

It is particularly important to make the data property configurable so that you can call it again by Object.defineProperty ().

The getter function then calculates and calls Object.defineProperty () again. For data, redefine the property as a data property with a specific value and make it unwritable and unconfigurable to protect the final data. The next time data reads the attribute, it will be read from the stored value. The data property now exists only as its own, and has the same effect before and after the first read:

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, simpler methods can be used in object mode.

Deferred loading properties of the object

If you are using an object schema instead of a class, the process is much simpler because the getter defined on the object schema is defined as an enumerable own property (rather than a prototype property) as well as a data property. This means that you can use deferred load property mode for classes without causing confusion:

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 at this point, the study on "how to use deferred loading properties in JavaScript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.