Object.defineProperty()

  • 通常我们在对象上添加/修改属性和方法
let obj = {
      user:'xiaoming'
}
obj.detail = 'obj详情’//添加
obj.fun = function(){}
  • Object.defineProperty也可以修改/添加属性

  • Object.defineProperty(目标对象,要修改/添加的属性名,特性)

Object.defineProperty(obj, prop, descriptor)
let obj10 = {}
// obj10.num = 13
Object.defineProperty(obj10,'num',{value:13})
console.log(obj10.num)//13
  • 看上面的例子,Object.defineProperty的第三个参数:是一个{}类型,我们可以在第三个参数里面设置它的,可枚举性,是否可读等特性,下面一一例举
  1. value 设置属性值(可以是任意值)
let obj10 = {}
// obj10.num = 13
Object.defineProperty(obj10,'num',{value:13})
console.log(obj10.num)//13
Object.defineProperty(obj10,'num',{value:101})
console.log(obj10.num)//101
  1. writable:是否可写,默认false不可
let obj10 = {}
Object.defineProperty(obj10,'num',{value:13})//添加
console.log(obj10.num)//13
obj10.num=101
console.log(obj10.num)//没有修改,值还是13
Object.defineProperty(obj10,'num',{value:111})//尝试修改----报错
console.log(obj10.num)
image.png
  • 上面的例子,为什么没有出现我们想要的结果?因为Object.defineProperty第三个参数对象里有个属性writable--表示是否可写。默认是false不可写。将他改为true可写状态。
let obj10 = {}
Object.defineProperty(obj10,'num',{value:13,writable:true})//添加
console.log(obj10.num)//13
obj10.num=101
console.log(obj10.num)//101
Object.defineProperty(obj10,'num',{value:111,writable:true})
console.log(obj10.num)//111
  1. enumerable:是否可枚举,默认false不可。enumerable:false表示对象该属性不可在for…in/Object.keys()中枚举。看下面的例子,enumerable:true就可以打印出来。
var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true})
console.log(Object.keys(obj10))// ["name", "age", "gender", "detail"]

var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true})
console.log(Object.keys(obj10))// ["name", "age", "gender"]
console.log(obj10)//{name: "xiaoming", age: 10, gender: 0, detail: "detail"}
  1. Configurable 属性:默认值false。true可以删除可以重新定义。false不可删除不可以重新定义
var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true,configurable:false})//configurable:false不可删除,不可重新定义
delete obj10.detail
console.log(obj10)//{name: "xiaoming", age: 10, gender: 0, detail: "detail"}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true,configurable:true})//报错
  1. 自定义getter,setter:get是获取的方法。set是设置的方法。使用getter,setter方法是不可以使用writable和value这两个属性
var temp = null
var obj = {}
Object.defineProperty(obj,'gender',{
    get:function () {
        return temp
    },
    set:function (value) {
        temp = value
    }
})
obj.gender='设置值'//set
console.log(obj.gender)//get
  • 总结:Object.defineProperty方法可以在对象上添加/修改属性,然后返回给这个对象。设置特性对象参数:
    value: 设置属性的值
    writable: 值是否可写。
    enumerable:是否可以被枚举。
    configurable: 是否可以被删除且再次修改特性
    set: 给目标属性设置值的方法
    get:获取目标属性值的方法

你可能感兴趣的:(Object.defineProperty())