题记:很多古老的框架或者为了兼容老版本的浏览器都是通过set
的方法或者脏检查来通知订阅者。随着技术的发展最新的框架为了实现绑定通过Object.defineProperty
来订阅对象的改变,其中Object.observe
是ES7规范提案中的,不确定会不会被干掉。
Object.defineProperty
Object.defineProperty(object, propertyname, descriptor)
参数
object: 定义的对象
propertyname:参数名称
descriptor:定义的描述信息
descriptor
参数的键 | 描述 | 默认值 |
---|---|---|
configurable | 属性能否被删除或者重新定义 | false |
enumerable | 遍历对象的时候属性是否可见 | false |
value | 属性值,当设置后不能设置get 和set |
undefind |
writable | 属性能否改变 | |
get | 当获取属性的时候触发 | undefind |
set | 当设置属性的时候触发 | undefind |
资料说writable
默认值为false
,但是当不设置这个参数的时候,value
是可以改变的,持怀疑态度,求解
var user={};
Object.defineProperty(user, 'name', {
get:()=>{
console.log(`get value:${this.name}`)
return this.name;
},
set:value=>{
console.log(`set value:${value}`)
this.name=value;
}
});
注:下面设置会抛出异常
var user={};
Object.defineProperty(user, 'name', {
value:'johe',
get:()=>{
console.log(`get value:${this.name}`)
return this.name;
},
set:value=>{
console.log(`set value:${value}`)
this.name=value;
}
});
//Uncaught TypeError: Invalid property descriptor.
//Cannot both specify accessors and a value or writable attribute, #
Object.defineProperties
Object.defineProperties(object, props)
参数
object: 定义的对象
props: 添加的属性, key
和 value
分别Object.defineProperty
中的第二和第三个参数。
Object.observe
Object.observe(object, callback, acceptList)
Object.unobserve(object,callback)
参数
object: 定义的对象
callback:参数修改后的回掉
acceptList:设置订阅属性的操作类型:["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]
,当为null
的时候是全部
var user={};
Object.observe(user,info=>{console.log(info)});
user.baz=2;
//{"type":"add","object":{},"name":"baz"},
user.baz=3;
//{"type":"update","object":{},"name":"baz","oldValue":2}
delete user.baz;
//{"type":"delete","object":{},"name":"baz","oldValue":3}