proxy.foo
和 proxy['foo']
。
set(target, propKey, value, receiver):拦截对象属性的设置,比如 proxy.foo = v
或 proxy['foo'] = v
,返回一个布尔值。
has(target, propKey):拦截 propKey in proxy
的操作,返回一个布尔值。
deleteProperty(target, propKey):拦截 delete proxy[propKey]
的操作,返回一个布尔值。
ownKeys(target):拦截 Object.getOwnPropertyNames(proxy)
、 Object.getOwnPropertySymbols(proxy)
、 Object.keys(proxy)
、 for...in
循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而 Object.keys()
的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey):拦截 Object.getOwnPropertyDescriptor(proxy, propKey)
,返回属性的描述对象。
defineProperty(target, propKey, propDesc):拦截 Object.defineProperty(proxy, propKey, propDesc)
、 Object.defineProperties(proxy, propDescs)
,返回一个布尔值。
preventExtensions(target):拦截 Object.preventExtensions(proxy)
,返回一个布尔值。
getPrototypeOf(target):拦截 Object.getPrototypeOf(proxy)
,返回一个对象。
isExtensible(target):拦截 Object.isExtensible(proxy)
,返回一个布尔值。
setPrototypeOf(target, proto):拦截 Object.setPrototypeOf(proxy, proto)
,返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
apply(target, object, args):拦截 Proxy
实例作为函数调用的操作,比如 proxy(...args)
、 proxy.call(object, ...args)
、 proxy.apply(...)
。
construct(target, args):拦截 Proxy
实例作为构造函数调用的操作,比如 new proxy(...args)
。
4. 新标准性能红利
Proxy
作为新标准,长远来看,JS引擎会继续优化 Proxy
,但 getter
和 setter
基本不会再有针对性优化。
5. Proxy兼容性差
可以看到, Proxy
对于IE浏览器来说简直是灾难。
并且目前并没有一个完整支持 Proxy
所有拦截方法的Polyfill方案,有一个google编写的proxy-polyfill 也只支持了 get,set,apply,construct 四种拦截,可以支持到IE9+和Safari 6+。
四 总结
Object.defineProperty 对数组和对象的表现一直,并非不能监控数组下标的变化,vue2.x中无法通过数组索引来实现响应式数据的自动更新是vue本身的设计导致的,不是 defineProperty 的锅。 Object.defineProperty 和 Proxy 本质差别是,defineProperty 只能对属性进行劫持,所以出现了需要递归遍历,新增属性需要手动 Observe 的问题。 Proxy 作为新标准,浏览器厂商势必会对其进行持续优化,但它的兼容性也是块硬伤,并且目前还没有完整的polifill方案。参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
https://www.jb51.net/article/171872.htm
https://zhuanlan.zhihu.com/p/35080324