关于vue中的defineProperty

下面是Vue源码中defineProperty的函数
官方文档上对于该属性的说明如下:Object.defineProperty(obj, prop, descriptor)
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。

/**
 * Define a property.
 */
function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。

enumerable
当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:

value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

writable
当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值:

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

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

其中的 configurable 和 writable 比较让人混淆。

简单点说:configurable 就是让属性可以删除;writable 让属性可以修改;enumerable让属性可以枚举,如果设置为false,那么for in循环遍历的对象的时候就获取不到

defineProperty和直接对象上定义属性似乎没什么区别?

defineProperty允许精确添加或修改对象的属性。通过赋值来添加的普通属性的值可以被改变,也可以被删除。defineProperty方法定义更加精确,包括是否可以删除、是否可以修改、是否可以枚举,添加get/set方法等等。默认情况下,使用Object.defineProperty()添加的属性值是不可变的。

关于get/set方法:
首先,不能设置value属性,不然会报错

(function(){
   var obj = {}
   Object.defineProperty(obj,"a",{
   	get : function(){
   		return this.tmp  // 返回tmp修改数据
   	},
    set : function(value){
    	this.tmp=value   // 获取传入的value,赋值给tmp
    },
   })
   obj.a = '20'
   console.dir(obj)    // a为20,并且还绑定了get和set方法
})();

由此可以得出结论,set和get方法本质上都是对数据进行劫持,进行处理后返给get

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值