Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式

访问器属性的介绍

参考资料:《JavaScript高级程序设计》(第三版)第六章

js的对象有两种属性: 数据属性和访问器属性。

1.数据属性

数据属性包含一个数据值的位置。这个位置可以读取和写入值。数据属性也就是我们最常见的对象属性。数据属性有4个描述他行为的特性:

  • Configurable: 能否用delete删除属性从而重新定义属性。默认为true
  • Enumerable: 能否通过for-in遍历,即是否可枚举。默认为true
  • Writable: 是否能修改属性的值。默认为true
  • Value: 包含这个属性的数据值,读写属性的时候其实就在这里读写。默认为undefined

要修改属性的上述4个默认特性,就必须使用ECMAScript的Object.defineProperty()方法,该方法包含3个参数:属性缩在的对象,属性名,描述符对象。描述符对象的属性必须在上述4个属性中。例如:

var person = {};
Object.defineProperty(person,"name",{
    writable: false,
    value: "Nicholas"
});

alert(person.name);   // "Nicholas"
person.name = "Tom";
alert(person.name);  // "Nicholas"

上例创建了一个不可写的name属性并赋值。所以无法修改。

注意,一旦把Configurable属性设置为false,就无法再将其变回true了,此时再想修改特性,就都会报错了。

2.访问器属性

访问器属性不包含数据值,他们包含一对getter和setter函数(非必须)。在读写访问器属性的值的时候,会调用相应的getter和setter函数,而我们的vue就是在getter和setter函数中增加了我们需要的操作。

访问器属性有以下4个特

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值