Proxy
Object.defineProperty(target, key , handler)
target 对象 key 对象内的属性名 handler 对属性的操作
var proxy = new Proxy(target, handler)
target 对象 handler 对代理对象的操作
首先从语法上, 可以看出差别Object.defineProperty() 需要对对象内的属性做操作,说明它只监测到对象内的属性,对象外的属性不做响应。
而 proxy 监测整个对象, 他不需要你给任何一个key。proxy 可以在 不知道属性name的情况下, 就可以做get/set拦截
在不知道属性name的情况,我get 什么 都可以返回值(key存不存在都可以,不存在也不会报错):
var proxy = new Proxy({}, {
get: function(target, property){ return 35 ; }
})//{}可以是匿名的,防止被改动
proxy.name //35
proxy.titler //35
当在data:{}外面添加的属性设置后,打印data 还是可以看到 属性被添加到这个对象中来, 只是这样而已,由于Object.defineProperty() 的限制, 只要不是咋data内的属性都不会被它监测到。
proxy优势在于: 弥补了旧版的缺陷, 将本来不存在{}中的key: value , 通过set, 代理中存在添加的属性, 并会被监测。
不过proxy 只会代理当前对象, 不会代理当前对象的子对象。也就是当我们通过当前对象去设置其子对象时 是不会成功设置的。当前对象是data, 那么 proxy.data.obj .dd = 22 是不会被代理的。 除非自己写一个函数 判断如果这个属性不存在的情况,给这个属性加一个proxy 对象, 可以解决问题。
最后总结一下proxy 的作用
代理的意思, 对外部访问先做一层拦截过滤等操作
proxy 可以在 不知道属性name的情况下, 就可以做get/set拦截, 这个要比defineProperty厉害一点。
proxy 改变了 defineProperty 添加属性后 无法更新的 bug
可以看一下阮一峰老师的《ECMAScript 6 入门》