Proxy

2019-04-16  本文已影响0人  怎么昵称

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 入门》

上一篇下一篇

猜你喜欢

热点阅读