“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

We know that objects can store properties. Properties look like a simple “key-value” pair. But object properties are actually something more flexible and powerful. Now let’s take a closer look.

Attribute marks

To get started, let’s look at a method that can query for complete information about attributes.

Grammar: Object. GetOwnPropertyDescriptor (obj, prop)

Parameter: obj The target object to look for prop Property name within the target object Return value The return value is a so-called "property descriptor" object: it contains the value and all flags.Copy the code

Example:

As you can see from the above, we write a name attribute to the User object, but we also get three special attributes, called “flags,” in addition to the value of the attribute.

  • writable– if fortrue, the value can be modified, otherwise it is only readable.
  • enumerable– if fortrue, will be listed in the loop, otherwise will not be listed.
  • configurable– if fortrue, this feature can be deleted and these attributes can be modified. Otherwise, it cannot be.

When a property is normally created, each of these flags has a value of true

mark

Of course, these signs are also modifiable

Object. DefineProperty (obj, propertyName, Descriptor)

Obj and propertyName: Objects and properties to which the descriptor is applied. Descriptor: Property descriptor object to be applied.Copy the code

Influence of logo

read-only

Now let’s look at what the logo does;

Let’s start with an example:

We set user.name to read-only by changing the writable flag (user.name cannot be reassigned). Now no one can change the name of our user. Unless they apply their own defineProperty to override our user’s name.

Note: This error only occurs in strict mode.

An enumeration

Object with an enumerable default value

But you can set Enumerable: False to not enumerate a property

Object.defineProperty(user, "age", {
  enumerable: false
});
Copy the code

Non-enumerable attributes, except for for.. It is not displayed in the in loop, and is also excluded by object.keys

Object.keys(user) // name
Copy the code

configurable

  • Unconfigurable flag (configurable:false) is sometimes preset in built-in objects and properties.
  • Properties that cannot be configured cannot be deleted.

Example: math.pi is read-only, not enumerable, and not configurable

So that’s why you can’t directly modify Math.pi (in strict mode, of course).

The “64x: false” works without any additional information, preventing the modification and deletion of any property flags, but allowing the change of the object’s value.

If you create a new object with just the configured: false, the property values can be modified without any additional deletion

extension

Define more than one attribute at a time, using Object.defineProperties(obj, descriptors)

Grammar:

Object.defineProperties(obj, {
  prop1: descriptor1,
  prop2: descriptor2
  // ...
});
Copy the code

Example:

Object.defineProperties(user, {
  name: { value: "John", writable: false },
  surname: { value: "Smith", writable: false },
  // ...
});
Copy the code

Set the global sealing object

Property descriptors work at the level of a single property, and there are also less commonly used, but understandable, methods for limiting access to whole objects

grammar describe
Object.preventExtensions(obj) Disallow adding new attributes to an object.
Object.seal(obj) Disallow adding/removing attributes. Set for all existing propertiesconfigurable: false.
Object.freeze(obj) Disallow adding/removing/changing properties. Set for all existing propertiesconfigurable: false, writable: false.

Methods are also provided to see if the above Settings take effect

grammar describe
Object.isExtensible(obj) Returns if adding attributes is disallowedfalseOtherwise returntrue.
Object.isSealed(obj) If add/remove attributes are disabled and all existing attributes areconfigurable: falseIt returnstrue.
Object.isFrozen(obj) If add/remove/change properties are disabled and all current properties areconfigurable: false, writable: false, the returntrue.

References:

MDN getOwnPropertyDescriptor

MDN defineProperty

Property flags and descriptors

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Product, technology, design and other areas of the Internet “basic terms” literacy

👉 Web security defense means are here!

👉 7 types of JavaScript to fill in the gaps!

👉 JavaScript deep copy and shallow copy read this article is enough!