Object.defineProperty
2019-09-19 本文已影响0人
无故下架内容so账号已弃用
-
作用: 直接在一个对象上定义一个新属性, 或者修改一个对象的现有属性
-
语法: Object.defineProperty(obj, prop, descriptor)
-
参数:
- obj - 要在其上定义属性的对象,
- prop - 要定义或者修改的属性的名称
-
- descriptor - 将被定义或修改的属性描述符, 描述符必须是以下两种形式之一
a. 数据描述
configurable 是否可以删除目标属性, 默认为 false
enumerable 此属性是否可以被枚举, 默认为 false
value 改属性对应的值, 默认为 undefine
writable 属性的值是否可以被重写, 默认为 falseb. 访问器描述
getter 是一种获得属性值的方法
setter 是一种设置属性值的方法
- a. 数据描述
定义一个 data 对象
var data = {
name: 'liguoyou'
}
修改属性 name
Object.defineProperty(data, 'name', {
value: 'guoyou.li'
})
console.log(data) // {name: "guoyou.li"}
添加属性 birthday
Object.defineProperty(data, 'birthday', {
value: '1995-02'
})
console.log(data) // {name: "guoyou.li", birthday: "1995-02"}
console.log(data.birthday) // 1995-02
尝试重写 data.birthday,
添加属性 birthday时, writable 默认为false, 无法重写 birthday 的值
data.birthday = '2019-09'
// writable 默认为false, 无法重写 birthday 的值
console.log(data.birthday) // 1995-02
添加属性 email, 并设置为可被重写
Object.defineProperty(data, 'email', {
value: '516115887@qq.com',
writable: true
})
console.log(data) // {name: "guoyou.li", birthday: "1995-02", email: "516115887@qq.com"}
console.log(data.email) // 516115887@qq.com
修改 email 属性值
data.email = 'guoyou.li@foxmail.com'
console.log(data.email) // guoyou.li@foxmail.com
- b. 访问器描述
个人信息对象
var userInfo = {
id: '56237845',
name: 'GG'
}
在对象中添加一个属性与存取描述符的示例
var telVal = '13588888888'
Object.defineProperty(userInfo, 'tel', {
get() {
return telVal
},
set(val) {
telVal = val
}
})
如果我们访问 userInfo 的 tel 属性
console.log(userInfo.tel) // 13588888888
如果我们设置 userInfo 的属性值
userInfo.tel = '123543643575'
现在 userInfo.tel 的值总是与 telVal 相同，除非重新定义 userInfo.tel
console.log(userInfo)
// 最终的 userInfo 为:
// {
// id: "56237845"
// name: "GG"
// tel: "123543643575"
// get tel: ƒ get()
// set tel: ƒ set(val)
// __proto__: Object
// }
