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

/** obj 要定义属性或修改属性的目标对象。* prop 属性名称* descriptior 属性描述符*/Object.defineProperty(obj, prop, descriptor)

属性描述符

  • configurable 对象是否可通过Object.defineProperty修改,默认false
  • enumerable 能否枚举(for..in 或 Object.keys),默认false
  • writable 只有为true才能通过赋值来修改值,默认false
  • value 属性的值,默认undefined
  • get 当访问该属性时,该方法会被执行,默认undefined
  • set 当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。默认undefined

(value或writable)和(get或set)不能同时存在

var a = {};Object.defineProperty(a,'name',{configurable : false})Object.defineProperty(a,'name',{value : 'xuriliang'})  //会抛出异常,如果configurable为true则不会a.name = 'rlxu' // a得值不会发生改变,因为writable默认为falseObject.keys(a)  //没有获取到name,因为enumerable默认为false

定义属性

通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...in 或 Object.keys 方法), 这些属性的值可以被改变,也可以被删除。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。

var obj = {};Object.defineProperty(obj,'name',{    configurable : true,    writable : true,    enumerable : true,    value : 'xuriliang'})Object.keys(obj)  //enumerable为true,可枚举obj.name = 'rlxu'; //writable为true,可赋值

修改现有属性

仅当属性描述configurable为true时,才可以修改属性。(通过赋值操作添加的普通属性configurable、enumerable、writable默认为true)

var obj = { name : 'xuriliang'}var showLog = function(newval){    console.log('name change :'+newval)}Object.defineProperty(obj,'name',{    enumerable: true,    configurable: true,    set : function(newval){        showLog(newval)    }})obj.name = 'rlxu';

Vue中的应用

const sharedPropertyDefinition = {  enumerable: true,  configurable: true,  get: noop,  set: noop}export function proxy (target: Object, sourceKey: string, key: string) {  sharedPropertyDefinition.get = function proxyGetter () {    return this[sourceKey][key]  }  sharedPropertyDefinition.set = function proxySetter (val) {    this[sourceKey][key] = val  }  Object.defineProperty(target, key, sharedPropertyDefinition)}function initData (vm: Component) {  let data = vm.$options.data  data = vm._data = typeof data === 'function'    ? getData(data, vm)    : data || {}  if (!isPlainObject(data)) {    data = {}    process.env.NODE_ENV !== 'production' && warn(      'data functions should return an object:\n' +      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',      vm    )  }  // proxy data on instance  const keys = Object.keys(data)  const props = vm.$options.props  const methods = vm.$options.methods  let i = keys.length  while (i--) {    const key = keys[i]    if (process.env.NODE_ENV !== 'production') {      if (methods && hasOwn(methods, key)) {        warn(          `Method "${key}" has already been defined as a data property.`,          vm        )      }    }    if (props && hasOwn(props, key)) {      process.env.NODE_ENV !== 'production' && warn(        `The data property "${key}" is already declared as a prop. ` +        `Use prop default value instead.`,        vm      )    } else if (!isReserved(key)) {      proxy(vm, `_data`, key)        }  }  // observe data  observe(data, true /* asRootData */)}

参考资料

MDN