Object.defineProperty

• 作用: 直接在一个对象上定义一个新属性, 或者修改一个对象的现有属性

• 语法: Object.defineProperty(obj, prop, descriptor)

• 参数:

• 1. obj - 要在其上定义属性的对象,
• 2. prop - 要定义或者修改的属性的名称
• 3. descriptor - 将被定义或修改的属性描述符, 描述符必须是以下两种形式之一

  a. 数据描述

  configurable 是否可以删除目标属性, 默认为 false
  enumerable 此属性是否可以被枚举, 默认为 false
  value 改属性对应的值, 默认为 undefine
  writable 属性的值是否可以被重写, 默认为 false

  b. 访问器描述

  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
// }

更多详细内容查看文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty