理解Object.defineProperty()

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)
obj: 增加或修改属性的对象
prop：增加或修改的属性名
descriptor：增加或修改的属性描述符

descriptor 属性描述符

属性描述符有主要两种形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个属性的描述符只能是其中之一。
这两种描述符都是对象。
（1）数据描述符&存取描述符共同可选键值
configurable：默认为 false
当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。

enumerable：默认为 false
当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中，才可以使用Object.keys()及 for...in 获取到。

（2）数据描述符可选键值
value：默认为 undefined
value设置的值为该属性对应的值。可以是JavaScript 中的所有数据类型的值。

writable：默认为 false
控制该属性的值是否可改变，当且仅当该属性的 writable 键值为 true 时，属性的值，即 value，才能进行运算。

（3）存取描述符可选键值
get：默认为 undefined
当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值(特别注意）。

set：默认为 undefined
当属性值被修改时，会调用此函数。该方法接受一个参数（修改的新值），会传入赋值时的 this 对象。

注意：get或set不是必须成对出现，任写其一也可以。

总结描述符可拥有的键值：

描述符	configurable	enumerable	value	writable	get	set
数据描述符	√	√	√	√	×	×
存取描述符	√	√	×	×	√	√

从上表可以看出，如果一个描述符具有 value、writable键值，那么它就是一个数据描述符，同理，如果一个描述符具有 get 和 set 中的任意一个键值，它就是一个存取描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会抛出异常。

有时候我们需要修改属性上面提到的默认设置或者监听对象属性的存取，就可以通过 Object.defineProperty() 来实现。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改、不可枚举、不可删除的。

方法使用

// 创建对象
  let obj = {}
  let cVal = 100
// 在对象中添加两个设置了数据描述符的属性
  Object.defineProperty(obj, 'a', {
    value: 1,
    enumerable: true,
    configurable: false,
    writable: false
  })
  Object.defineProperty(obj, 'b', {
    value: 2,
    enumerable: false,
    configurable: true,
    writable: true
  })

// 在对象中添加一个设置了存取描述符的属性
  Object.defineProperty(obj, 'c', {
    /* 需要特别注意的是：
    （1）使用了get或set，该方法的第三个参数就是存取描述符，不能使用value 和 writable 作为键值，会报错
    （2）get 方法返回的值会作为该属性的值，可以打印对象来验证
    */
    get() {
      console.log(`get obj.c: ${cVal}`)
      return `get obj.c: ${cVal}`
    },
    set(newVal) {
      cVal = newVal
      console.log(`set obj.c: ${newVal}`)
    }
  })
// 对象中添加一个设置了包含数据描述符和存取描述符的属性
  let dVal = 100
  Object.defineProperty(obj, 'd', {
    get() {
      return dVal
    },
    value: 100
  }) // 输出：Error Invalid property descriptor. Cannot both specify accessors and a value or writable attribute   分析：数据描述符和存取描述符不能混合使用

  console.log(Object.keys(obj)) // 输出：["a"]  分析：属性'b'设置enumerable为false不可枚举，属性'c'未设置enumerable，默认为为false不可枚举,也可以通过obj.propertyIsEnumerable()来查看对象的属性是否可枚举
  console.log(obj.propertyIsEnumerable('a')) // true
  console.log(obj.propertyIsEnumerable('b')) // false
  console.log(obj.propertyIsEnumerable('c')) // false

  delete obj.a // 无效，严格模式报错  分析：'a'属性设置了configurable为false，属性不可删除
  obj.a = 111 // 无效，严格模式报错  分析：'a'属性设置了writable为false，属性值不可修改
  console.log(obj) // 输出：{a: 1, b: 2, c: "get obj.c: 3"}

  obj.c // 输出：get obj.c: 100  分析：调用get函数
  obj.c = 3 // 输出：set obj.c: 3  分析：调用set函数
  console.log(obj) // 输出：{a: 1, b: 2, c: "get obj.c: 3"}

描述符默认值

我们知道obj = {name1:value1, name2:value2}及obj.name = value这种赋值方式添加的属性是可枚举的，可以使用for...in 或 Object.keys的方式进行枚举，也可以修改这些属性的值，还可以直接删除属性。而使用Object.defineProperty()添加的属性值默认是不可枚举、不可修改、不可删除的。

let obj = {'a': 1}
  // 等同于
  let obj = {}
  obj.defineProperty(obj, 'a', {
    writable: true,
    enumerable: true,
    configurable: true,
    value: 1
  })

  obj.defineProperty(obj, 'a', {
    value: 1
  })
  // 等同于
  obj.defineProperty(obj, 'a', {
    writable: false,
    enumerable: false,
    configurable: false,
    value: 1
  })

在这里分享一个默认值的坑。

// 创建对象
  let obj = {
    'a': 1,
    'b': 2
  }
  // 在对象中修改'a' 属性
  Object.defineProperty(obj, 'a', {
    value: 10
  })
  obj.a = 100
  console.log(obj)  // {a: 100, b: 2}

代码分析：
Object.defineProperty()并没有指定configurable、enumerable和writable的值，就容易让人认为这三个值都是false，因此不能对 obj.a进行修改或删除操作，obj.a = 100执行无效，但是实际上发现obj.a是可以修改的，这是为什么呢？
原因是在创建obj 对象时就已经为该对象添加了a属性，根据上面的描述符默认值内容可知configurable、enumerable和writable都为true，再通过Object.defineProperty() 修改a属性的值，只设置了value，并没有指定configurable、enumerable和writable，因此他们的值都是true。

当然，也可在Object.defineProperty()直接修改描述符的键值。

// 创建对象
  let obj = {
    'a': 1,
    'b': 2
  }
  // 在对象中修改'a' 属性
  Object.defineProperty(obj, 'a', {
    value: 10,
    writable: false // 直接修改writable的值
  })
  obj.a = 100
  console.log(obj) // 输出：{a: 10, b: 2}

其实，我们一般在需要获取对象属性或设置对象属性值的过程执行一些操作时，会用到Object.defineProperty()，它实际就是一个属性拦截器，vue.js也是通过该方法进行数据劫持从而实现双向数据绑定的。欢迎查看下一篇文章Object.defineProperty() 实现双向数据绑定小案例

最后分享一个面试小案例：如何实现一个对象的属性值连续打印出1、2、3？

    let aVal = 1
    let obj2 = {}
    Object.defineProperty(obj2, 'a', {
      get() {
        return aVal++
      }
    })
    console.log(obj2.a)  // 1
    console.log(obj2.a)  // 2
    console.log(obj2.a)  // 3

文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢

参考文档：
《JavaScript高级程序设计》 Object.defineProperty()