Shulou(Shulou.com)06/02 Report--

This article will explain in detail what the characteristics of JS attributes are, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Concept

An object called "attribute descriptor" is defined in ECMAScript 5 to describe the various features of. The property descriptor object has four properties:

Configurable: configurability controls the modification of the properties it describes, indicating whether the properties of the properties can be modified, whether the properties can be modified to accessor properties, or whether the properties can be deleted through the delete to redefine the properties. The default is true.

Enumerable: enumerable, indicating whether attributes can be obtained through for-in traversal. The default is true.

Writable: writeability, indicating whether the value of the property can be modified. The default is true.

Value: a data attribute that represents the value of the attribute. The default is undefined.

In addition to the above properties, there are two accessor properties, get and set, which can replace value and writable.

Get: the function called when the property is read. Specifying only get indicates that the property is read-only. The default is undefined.

Set: the function called when the property is written. Specifying only set means that the property is write-only. The default is undefined.

Use

The property descriptor object can only be used in Object.defineProperty or Object.defineProperties.

API usage

Object.defineProperty: https://developer.mozilla.org...

Object.defineProperties: https://developer.mozilla.org...

Var hello = {} Object.defineProperty (hello, 'girl', {configurable: false, enumberable: false, writable: true, value:' sexy'}) / / accessor Object.defineProperty (hello, 'woman', {configurable: false, enumberable: false, get: function () {return this.girl}) Set: function (val) {this.girl = val}}) / / define multiple attributes Object.defineProperties (hello, {boy: {configurable: false, enumberable: false, writable: false, value: 'handsome'}, man: {configurable: false, enumberable: false, writable: true Get: function () {return this.boy})

A type error exception is thrown when using Object.defineProperty or Object.defineProperties to manipulate (create or modify) properties that are not allowed to be created or modified.

/ / this example runs on the basis of the previous example Object.defineProperty (hello, 'boy', {writable: true}) / / Uncaught TypeError: Cannot redefine property: boy

Because the previous boy property has been set to non-configurable, modifying writable here will throw a type error exception.

Attribute descriptors can be obtained through Object.getOwnPropertyDescriptor or Object.getOwnPropertyDescriptors.

API usage

Object.getOwnPropertyDscriptor: https://developer.mozilla.org...

Object.getOwnPropertyDescriptors: https://developer.mozilla.org...

Rules

Var rules = {common: 'test'}

If a property is not configurable, its configurability and enumerability cannot be modified.

Object.defineProperty (rules, 'rule1', {configurable: false, enumberable: false}) / / modify configurable will throw type error exception Object.defineProperty (rules,' rule1', {configurable: true}) / / Uncaught TypeError: Cannot redefine property: rule1 / / modify enumberable will not throw an exception But enmuberable has not been modified Object.defineProperty (rules, 'rule1', {enumberable: true}) Object.getOwnPropertyDescriptor (rules,' rule1') / / Object {value: undefined, writable: false, enumerable: false, configurable: false}

If the accessor property is not configurable, the get and set methods cannot be modified, nor can it be converted to a data property.

Object.defineProperty (rules, 'rule2', {configurable: false, enumberable: false, get: function () {return this.common}, set: function (val) {this.common = val}}) / / modifying the get or set method throws a type error exception Object.defineProperty (rules,' rule2') {get: function () {return this.common + 'rule2'}}) / / Uncaught TypeError: Cannot redefine property: rule2 Object.defineProperty (rules,' rule2', {set: function (val) {this.common = 'rule2'}}) / / Uncaught TypeError: Cannot redefine property: rule2 / / converting it to a data attribute will also throw a type error exception Object.defineProperty (rules,' rule2') {value: 'rule2'}) / / Uncaught TypeError: Cannot redefine property: rule2

If a data property is not configurable, it cannot be converted to an accessor property; at the same time, its writability cannot be changed from false to true, but it can be changed from true to false.

Object.defineProperty (rules, 'rule3', {configurable: false, writable: false, value:' rule3'}) / / changing writable to true throws a type error exception Object.defineProperty (rules, 'rule3', {writable: true}) Object.defineProperty (rules,' rule4', {configurable: false, writable: true, value: 'rule4'}) / / you can change writable to false Object.defineProperty (rules 'rule4', {writable: false}) Object.getOwnPropertyDescriptor (rules,' rule4') / / Object {value: "rule4", writable: false, enumerable: false, configurable: false}

If the data property is not configurable and writable, its value cannot be modified; if it is configurable but not writable, its value can be modified (in fact, mark it as writable first, then modify its value, and then mark it back as unwritable).

In fact, the modification value mentioned here is modified through the Object.defineProperty or Object.defineProperties method. The property value cannot be modified by direct assignment when the data property is not configurable.

Object.defineProperty (rules, 'rule5', {configurable: false, writable: false, value:' rule5'}) / / modifying the attribute value will throw a type error exception Object.defineProperty (rules, 'rule5', {value:' rule55'}) / / Uncaught TypeError: Cannot redefine property: rule5 rules.rule5 = 'rule55' / / the value has not been modified The exception rules.rule5 / / 'rule5' Object.defineProperty (rules,' rule6', {configurable: true, writable: false, value: 'rule6'}) / / modifies the attribute value Object.defineProperty (rules,' rule6', {value: 'rule66'}) rules.rule6 / /' rule66' rules.rule6 = 'rule6' / / has not been modified Rules.rule6 / / 'rule6' will not be modified.

Only the specified set cannot be read, and if you try to read the property value, undefined is returned. (the Red Book says that an exception is thrown only in strict mode, but it does not.)

Object.defineProperty (rules, 'rule7', {get: function () {return this.common}}) rules.rule7 =' rule7' / / Uncaught TypeError: Cannot redefine property: rule7

If the object is not extensible, you can edit existing properties, but you cannot add new properties to it.

There are three API for Operand extensibility: Object.preventExtensions, Object.seal, and Object.freeze.

API usage

Object.preventExtensions: https://developer.mozilla.org...

Object.seal: https://developer.mozilla.org...

Object.freeze: https://developer.mozilla.org...

Object.isExtensions: https://developer.mozilla.org...

Object.isSealed: https://developer.mozilla.org...

Object.isFrozen: https://developer.mozilla.org...

Using Object.preventExtensions, you can convert objects to non-extensible.

Use Object.isExtensions to determine whether an object is extensible.

Var ex = {} Object.defineProperty (ex, 'ex1', {configurable: true, writable: true, value:' ex1'}) Object.isExtensible (ex) / / true Object.preventExtensions (ex) Object.isExtensible (ex) / / false / / existing attributes Object.defineProperty (ex, 'ex1', {writable: false, value:' ex11'}) Object.getOwnPropertyDescriptor (ex) can be modified 'ex1') / / Object {value: "ex11", writable: false, enumerable: false, configurable: true} / / adding an attribute throws a type error exception Object.defineProperty (ex,' ex2', {value: 'ex2'}) / / Uncaught TypeError: Cannot define property:ex2, object is not extensible.

In addition to converting objects to non-extensible, you can also convert all of the object's own properties to non-configurable using Object.seal. That is, you cannot add new properties to an object, and its existing properties cannot be deleted or configured (the previous rules will also be followed here).

Use Object.isSealed to determine whether the object is closed (sealed).

Var se = {} Object.defineProperty (se, 'se1', {configurable: true, writable: false, value:' se1'}) Object.isSealed (se) / / false Object.seal (se) Object.isSealed (se) / / true / / modifying an existing property throws a type error exception Object.defineProperty (se, 'se1', {writable: true) Value: 'se11'}) / / Uncaught TypeError: Cannot redefine property: se1 / / adds a type error exception Object.defineProperty (se,' se2', {value: 'se2'}) / / Uncaught TypeError: Cannot define property:se2, object is not extensible.

In addition to converting an object to non-extensible and its properties to non-configurable, you can also convert your own properties to read-only using Object.freeze. (if the object has set set, the accessor property will not be affected, the set method can still be called, and no exception will be thrown, but if the set method changes the property of the object, it cannot be modified successfully.)

Use Object.isFrozen to detect whether objects are frozen (frozen).

Var fr = {} Object.defineProperty (fr, 'fr1', {configurable: true, writable: false, value:' fr1'}) Object.isFrozen (fr) / / false Object.freeze (fr) Object.isFrozen (fr) / / true / / modifying an existing property throws a type error exception Object.defineProperty (fr, 'fr1', {writable: true) Value: 'fr11'}) / / Uncaught TypeError: Cannot redefine property: fr1 / / adds a type error exception Object.defineProperty (fr,' fr2', {value: 'fr2'}) / / Uncaught TypeError: Cannot define property:fr2, object is not extensible. Fr.fr1 = 'fr11' / / cannot modify fr1 attribute fr.fr1 / /' fr1' var set = {} Object.defineProperty (set, 'set1', {configurable: true, value:' set1'}) Object.defineProperty (set, 'set2', {configurable: true Set: function (val) {this.set1 = val}}) Object.isFrozen (set) / / false Object.freeze (set) Object.isFrozen (set) / / true set.set2 = 'set2' set.set1 / /' set1'

I am not familiar with attribute descriptors, mainly because I usually use them less. Recently, however, I have started to learn to write some small libraries (though very frustrating), and I feel that there are scenarios in which attribute descriptors are used. All I can think of for the time being is to set some properties of the library object to read-only to prevent some properties of the object from being overwritten by user overrides. Another usage that you know when learning vue and Zhihu is to update the data of "listening" object properties through getter and setter (dig a hole here. Learn this method later, and then write an article on "listening" for data updates on object properties.

So much for sharing about the characteristics of the JS attribute. I hope the above content can be of some help to you and learn more. If you think the article is good, you can share it for more people to see.

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.