JS --- Proxy

121 阅读2分钟

Proxy

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

下面是 Proxy 支持的拦截操作一览,一共 13 种。

  • get(target, propKey, receiver): 拦截对象属性的读取,比如 proxy.nameproxy['name']

  • set(target, propKey, value, receiver): 拦截对象属性的设置,比如 proxy.age = 10proxy['age'] = 10

  • has(target, propKey): 拦截 propKey in proxy 的操作,返回一个布尔值。

  • deleteProperty(target, propKey): 拦截 delete proxy[propKey] 的操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除。

  • 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),返回一个布尔值。

  • isExtensible(target) 拦截Object.isExtensible(proxy), 返回一个布尔值。

  • getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy), 返回一个对象。

  • setPrototypeOf(target, proto) 拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

  • apply(target, ctx, args) 拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)

  • construct(target, args) :拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)

Proxy.revocable()

方法返回一个可取消的 Proxy 实例。

let target = {};
let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked

Proxy.revocable()方法返回一个对象,该对象的proxy属性是Proxy实例,revoke属性是一个函数,可以取消Proxy实例。上面代码中,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误。

Proxy.revocable()的一个使用场景是,目标对象不允许直接访问,必须通过代理访问,一旦访问结束,就收回代理权,不允许再次访问。

原文 es6.ruanyifeng.com/#docs/proxy