Easy to learn JavaScript-Part 1: object property descriptor, javascript

Easy to learn JavaScript-Part 1: object property descriptor, javascript

In JavaScript, you can create an object literal volume as follows:

var cat = {  name: 'foo',  age: 9};

At first glance, it seems that the cat object has two attributes: string and numeric value. However, this is not just a JavaScript interpreter. In ES5, the concept of attribute descriptor is introduced. Before we continue to discuss attribute descriptors, let's try to answer a few questions:

• How to create read-only attributes?
• How do I define non-enumerated attributes?
• How do I disable attribute configuration?
• How do I determine whether an attribute is read-only?

If you understand attribute descriptors, you can answer all these questions.

See the following code:

var cat = {    name: 'foo',    age: 9};var a = Object.getOwnPropertyDescriptor(cat, 'name');console.log(a);

The output is as follows:

Image

As you can see here, this attribute has four features:

Value stores the data of the attribute, while writable, enumerable, and retriable describes other features of the attribute. Next we will describe these features one by one.

Writable

Whether the attribute value can be changed is determined by the writable feature. If writable is set to false, the attribute value cannot be changed. JavaScript ignores any changes in the attribute value. See the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { writable: false });console.log(cat.name); // foo cat.name = "koo"; // JavaScript will ignore it as writable is set to false console.log(cat.name); // foo

You can use Object. defineProperty to change the values of writable, enumerable, and retriable features. We will discuss Object in detail later in this article. defineProperty, but as you can see in the code snippet above, we have set the writable attribute to false, thus changing the value of the name attribute. JavaScript ignores reallocation, and the value of the name attribute is kept as foo.

If you run the code in strict mode, JavaScript throws an exception in order to re-allocate the property value set to false for writable. See the following code:

'use strict';var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { writable: false });console.log(cat.name); // foo cat.name = "koo"; // error

Here, JavaScript runs in strict mode. Therefore, when you reassign the value of the name attribute, JavaScript throws an exception, as shown below:

Image

The error message here indicates that you cannot assign a value to the read-only attribute. That is, if the writable feature of an attribute is set to false, the attribute acts as a read-only attribute.

Retriable

Whether other features of an attribute can be configured depends on the value of retriable. If the attribute retriable is set to false, the values of writable and enumerable cannot be changed. See the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { enumerable: false });

Here, we set the retriable of the name attribute to false. Then, set enumerable to false. As mentioned above, once the retriable of an attribute is set to false, you cannot change the other feature.

For the above Code, JavaScript will throw a TypeError exception, as shown in. You will get an error that the attribute name cannot be redefined:

Image

When using retriable, remember that changing the value of retriable can only be done once. If you set the retriable attribute to false, you cannot reassign it; you cannot cancel the change to retriable. See the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { configurable: true });

We are re-allocating the retriable property of name. However, JavaScript will throw a TypeError for the above operation, as shown in. As you can see, once the retriable is set to false, the change cannot be undone.

Image

Another important thing is that, even if the retriable is set to false, writable can be changed from true to false -- but vice versa. See the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { writable: false });cat.name = 'koo';console.log(cat.name); // foo

If it is not in strict mode, the above Code will not throw any exceptions. As we have discussed earlier, even if the retriable is false, writable can be changed from true to false, otherwise. Another important thing to remember is that you cannot delete the property whose retriable is set to false.

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { configurable: false });delete cat.name; // wont delete as configurable is false console.log(cat.name); // foo delete (cat.age); // will be deletedconsole.log(cat.age); // undefined

In the code above, you will find that JavaScript will not delete the name attribute, because the retriable of the name attribute is set to false.

Enumerable

For an attribute, if you set enumerable: false, this attribute will not appear in enumeration, so it cannot be used in such as... In loop.

See the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { enumerable: false });for (let f in cat) {    console.log(f); // will print only age }

Here, you can only get the age, because the enumerable of name is set to false. This is another important thing to remember: by setting enumerable: false, the unique attribute cannot be used for enumeration. Let's look at the following code:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { enumerable: false });console.log(cat.name); // foo console.log('name' in cat); // true

Here, the name attribute enumerable is set to false, but you can access it. When checking whether the name belongs to the cat attribute, you will also find that it is true.

Sometimes, you may need to check whether a specific attribute enumerable is set to false or true. You can do this by using the propertyIsEnumerable method:

var cat = {    name: 'foo',    age: 9};Object.defineProperty(cat, 'name', { enumerable: false });console.log(cat.propertyIsEnumerable("name")); // false

Conclusion

As a professional JavaScript developer, you must have a good understanding of the property descriptors of JavaScript objects. I hope you can learn some knowledge from this article! Continue to follow our next article and learn more important concepts in JavaScript.

Join the study exchange group 569772982 to learn and exchange.