乐趣区

JS基础ObjectdefineProperty

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 默认为 false
Object.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

退出移动版