This is the first day of my participation in the August Challenge. For details, see:August is more challenging

Object.defineproperty is used to define properties on an Object

introduce

Object.defineproperty is a method that creates or modifies a property. Accepts three parameters, and these three parameters are required

  • Parameter 1: Target Object (target:Object)

  • Parameter 2: The name or method of the target attribute to be defined (key:string)

  • Parameter 3: property descriptor (Object)

    There are several types of attribute descriptors

    1. Value: indicates the value of the attribute
    2. Writable: Whether the value of the property is writable. If true, it can be overridden. Otherwise, it is read-only
    3. The information is freely configurable
    4. Enumerable: Whether it is enumerable
    5. Get: The get method is fired when the value of the property is obtained, returning the value of the property
    6. Set: The set method is triggered when the value of this property is set. The parameter is the value of the set property.

When obj.key = value

For example, if we have an object const obj = {}, what is the descriptor for the attribute’s key when obj.key = ‘Hello word’?

Key = ‘Hello word’. Attribute descriptors for key attributes are all default values.

  • Writable is true by default

  • Enumerable is true by default

  • The default value is true

    Value is “Hello world”

We can use the Object. GetOwnPropertyDescriptor (obj, ‘key’) to view a attributes of the descriptor.

writable

We define a key property on the obj object that sets writable to false

Object.defineProperty(obj, 'key', {
  value: 'hello world'.writable: false.configurable: true.enumerable: true
})
Copy the code

Let’s print it out

Console. log(obj.key) output “Hello world”

Set the value of key

Obj. key = “Hello react” this line of code doesn’t do anything, the key value doesn’t change. If in strict mode, this line of code will report an error.

You might be wondering if writable is used together with get/set. Is the set function not triggered?

A: TypeError will be reported if we use writable with get/set: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

Configurable

  • We define a key property on the obj object that sets the information to false
Object.defineProperty(obj, 'key', {
  value: 'hello world'.writable: true.configurable: false.// Not configurable
  enumerable: true
})
Copy the code

A new property is not configurable if the property descriptor of the property is freely false. That is, the attribute description cannot be reconfigured.

  • Let’s modify the descriptor for the key property
Object.defineProperty(obj, 'key', {
  value: 'react'.writable: false.configurable: false.enumerable: false
})
Copy the code

Uncaught TypeError: Cannot defineProperty: key at function.defineproperty

  • One caveat

When the information is set to false, the property descriptor of the object cannot be changed, but the value can be changed again. Changing the information to false is a one-way operation and cannot be undone!

There is one minor exception: when the information is freely: false, the writable: false information can be changed to the writable: true information. It is not possible to change false to true.

We’re trying to remove the co property

delete obj.key

Print to see

console.log(obj)

{
  key: 'hello world'
}
Copy the code

The key is not deleted.

What is the reason for this?

A: This is because the key property is configured with a different: false, and therefore cannot be removed.

Note: Delete relates to garbage collection – after deleting a reference property in an object, the reference can be garbage collected if it has no other referrer

enumerable

Enumerable: Enumerable: Enumerable: Enumerable: Enumerable: Enumerable

Object.defineProperty(obj, 'key', {
  value: 'hello world'.writable: true.configurable: true.enumerable: false // Set Enumerable to false and the property cannot be enumerated
})
Copy the code
  • Using for in is convenient
for (let item in obj) {
	console.log(item, obj[item]) // en: '456' is not printed
}
Copy the code
  • Use the Object. The keys
console.log(Object.keys(obj)) // en: '456' is not printed
Copy the code

get

Value and get/set are mutually exclusive and cannot appear at the same time. Otherwise, an error will be reported.

So what if I just define get and assign

Object.defineProperty(obj, 'key', {
  get() {
	  return 'hello world'}})Copy the code

Assign a value to the target object

Obj. Og = ‘hello react

Because: if only GET is defined, the assignment to the target property will be ignored automatically

conclusion

This sums up the use of object.defineProperty, which is good for laying a solid foundation.

If it helps you, give it a like