How to learn object Defineproperty | an article takes you to quickly learn

Concept

Object.defineProperty()

  Method defines a new property directly on an object , Or modify the existing properties of an object , And return this object .

Learning route

Presumably, people who have studied the front end have more or less understood  

Object.defineProperty 

, But I don't know how to use it or study it deeply , Here I will take you to study systematically .

Defining attributes

grammar ：Object.defineProperty(obj, prop, descriptor)

• obj
  ： The object to define the property .

• prop
  ： The name of the property to be defined or modified or  Symbol .

• descriptor
  ： Property descriptor to define or modify .

let obj = {}
Object.defineProperty(obj, 'name', {
 value: 'hello'
})
console.log(obj.name); // hello

The attribute defined in this way is

countless

Of , You can't do it for in

countless

let obj = {}
Object.defineProperty(obj, 'name', {
 enumerable: true,
 value: 'hello'
})
for(let key in obj){
 console.log(key);
}

add to  

enumerable: true

  It becomes an enumerable attribute

Not configurable

let obj = {}
Object.defineProperty(obj, 'name', {
 enumerable: true,
 value: 'hello'
})
delete obj.name
console.log(obj.name); // hello

We are delete obj.name after , It is found that the results have not changed , That is to say, this attribute is not configurable

let obj = {}
Object.defineProperty(obj, 'name', {
 enumerable: true, //  enumeration
 configurable: true, //  To configure
 value: 'hello'
})
delete obj.name
console.log(obj.name); // undefined

By adding  

configurable: true

  To realize data configuration

Non rewritable

let obj = {}
Object.defineProperty(obj, 'name', {
 enumerable: true, //  enumeration
 configurable: true, //  To configure
 writable: true, //  rewrite
 value: 'hello'
})
obj.name = 'world'
console.log(obj.name);

Before that , We modify obj.name Value , It didn't happen , add to  

configurable: true 

After that, you can achieve the effect of rewriting

Implement interceptors

let obj = {}
let other = ''
Object.defineProperty(obj, 'name', {
 enumerable: true, //  enumeration
 configurable: true, //  To configure
 get(){ //  Reading method
 console.log('-----') //  Logic can be handled here
 return other
 },
 set(val){ //  Setup method
 other = val
 }
})
obj.name = 'world' // -> set
console.log(obj.name); // -> get
// -----
// world

adopt set and get Method , We can implement our own logic inside , To achieve the effect of interceptor

let obj = {
 other: '123',
 get name(){
 return this.other;
 },
 set name(val){
 this.other = val;
 }
}
obj.name = 456;
console.log(obj.name); // 456

This can also achieve the effect , Although the amount of code is small , But there is no intuition above