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