「Object.defineProperty」【面试业务必备】

语法定义： 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有

属性，并返回此对象。

语法

//obj:要定义属性的对象
//prop:要定义或修改的属性的名称
//descriptor:{}
Object.defineProperty(obj, prop, descriptor)

第一部分：数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。

//数据描述符默认三大特点：
1.不可修改：
2.不可重写：
3.不可枚举：
let obj = {}
Object.defineProperty(obj,'a',{
    value:1,
})
console.log(obj) //{a:1}

数据描述符可拥有的键值：

configurable：当且仅当该属性的 configurable 键值为 true 时，该属性也能从对应的对象上被

删除。默认为 false

/*
当且仅当该属性的 configurable 键值为 true 时，
该属性能从对应的对象上被删除。默认为 false。
*/ 
let obj = {}
Object.defineProperty(obj,'a',{
    value:1,
    configurable:true,

})
//  configurable:true 可删除
delete obj.a
console.log(obj) //{}  打印空字符串

enumerable：当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。

/*
当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象
的枚举属性中。默认为 false。
*/
let obj = {}
Object.defineProperty(obj,'a',{
    value:1,
    enumerable:true,
})
for (const key in obj) {
    console.log(key)//enumerable：false不可枚举：打印不出来
}

value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 

undefined。

给定属性名未定义：默认undefined

writable：当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。默认为 false。

/*
当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面
的 value，才能被赋值运算符 (en-US)改变。默认为 false。
*/ 
let obj = {}
Object.defineProperty(obj,'a',{
    value:1,
    writable:true

})
obj.a = 2
console.log(obj) //{a:2}

//writable:false不可改变a的值

第二部分：存取描述符：存取描述符是由 getter 函数和 setter 函数所描述的属性。

/*
getter
属性的 getter 函数，如果没有 getter，则为 undefined。
当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象
该函数的返回值会被用作属性的值。
*/ 
/*
set
属性的 setter 函数，如果没有 setter，则为 undefined。
当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），
会传入赋值时的 this 对象。
*/ 
let obj = {}
Object.defineProperty(obj,'a',{
  get(){
     // 访问a时候调用
     console.log('get a:',1) //给get里面的a赋值1
     return 1
    },
   set(newValue){
      // 修改a的值时启动:注意没有return
      // newValue:为修改的属性值
      console.log('set a:',newValue)
    }
})

第三部分：Object.defineProperties

<script>
   let obj = {}
   let num = 1
   Object.defineProperties(obj,{
      a:{
         get(){
             return num++
         },
         set(){
         }
      },
      b:{
         value:1
      }
   })
   if(obj.a===1&&obj.a===2&&obj.a===3&&obj.a===4){
       console.log('你好')
   }
   console.log(obj)
</script>