从Vue源码学习JavaScript之Objectdefineproperty

学 Vue 最耳熟能详的词就是 Object.defineproperty，这篇文章就介绍一下这个属性。

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

语法

Object.defineProperty(obj, prop, descriptor)

参数

• obj：要在其上定义属性的对象
• prop：要定义或者要修改的属性
• descriptor：将被定义或修改的属性描述符

descriptor 属性描述符

属性描述符又可分为数据描述符和存取描述符，可以用 getOwnPropertyDescriptors 或者 getOwnPropertyDescriptor 获取到属性描述

数据描述符和存取描述符共有的属性包括：

• configurable

  当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除，如果为 false，则不能删除或修改 writable, configurable, enumerable。默认为 true。

  
  var animal = {name: 'cat'}
  console.log(Object.getOwnPropertyDescriptors(animal)) 
  //name: {value: "cat", writable: true, enumerable: true, configurable: true}
  console.log(animal.name) //cat
  delete animal.name
  console.log(animal.name) //undefined
  
  Object.defineProperty(animal, 'name', {
      value: 'dog',
      configurable: false
  })
  console.log(Object.getOwnPropertyDescriptors(animal))
  //name: {value: "dog", writable: false, enumerable: false, configurable: false}
  console.log(animal.name) //dog
  delete animal.name
  console.log(animal.name) //dog
  

  可以看到，configurable 默认属性是 true，设置为 false 之后，delete 对象的属性将失效

需要注意的是，如果不是通过 defineproperty 定义的属性，描述符默认值都是 true；通过 defineproperty 定义的属性，描述符默认是 false

• enumerable

  当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中(for…in, Object.keys())。默认为 true。

  let animal = {name: 'cat'}
  for (let i in animal) {console.log(animal[i]) //cat
  }
  Object.defineProperty(animal, 'name', {enumerable: false})
  for (let i in animal) {console.log(animal[i]) // 无输出
  }
  
  

数据描述符其余属性：

• value

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

• writable

  当且仅当该属性的 writable 为 true 时，value 才能被赋值运算符改变。默认为 true。

存取描述符其余属性：

• get

  一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入 this 对象（由于继承关系，这里的 this 并不一定是定义该属性的对象）。

  
  let animal = {}
  let name = 'cat'
  Object.defineProperty(animal, 'name', {
    value: 'cat',
    get: function () {return name}
  })
  // 报错：Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
  
  let animal = {}
  let name = 'cat'
  Object.defineProperty(animal, 'name', {get: function () {return name}
  })
  console.log(animal.name) //cat
  
  
  

如果一个描述符不具有 value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有 (value 或 writable) 和(get 或 set)关键字，将会产生一个异常。

• set

  一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

  
  let animal = {}
  let name = 'cat'
  Object.defineProperty(animal, 'name', {get: function () {return name}，set: function (val) {name = val}
  })
  
  

如果访问者的属性是被继承的，它的 get 和 set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。

可以借助中间值来解决

    let animal = {}
    let name = 'cat'
    Object.defineProperty(animal, 'name', {get: function () {return this.stored_x}，set: function (val) {this.stored_x = val}
    })