ES6之Proxy代理器(拦截)

- 日理万妓 2022-12-13 04:52 162阅读 0赞

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

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

同一个拦截器函数，可以设置拦截多个操作。`proxy`对象是`obj`对象的原型，`obj`对象本身并没有`time`属性，所以根据原型链，会在`proxy`对象上读取该属性，导致被拦截。

var proxy = new Proxy({}, {
      get: function(target, propKey) {
        return 35;
      }
    });
    
    let obj = Object.create(proxy);
    obj.time // 35

拦截操作：

*  **get(target, propKey, receiver)**：拦截对象属性的读取，比如`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)`。

get:利用 Proxy，可以将读取属性的操作（`get`），转变为执行某个函数，从而实现属性的链式操作。

set:假定`Person`对象有一个`age`属性，该属性应该是一个不大于 200 的整数，那么可以使用`Proxy`保证`age`的属性值符合要求。

apply: 每当执行`proxy`函数（直接调用或`call`和`apply`调用），就会被`apply`方法拦截。

has:用来拦截`HasProperty`操作，即判断对象是否具有某个属性时(但是`has()`拦截对`for...in`循环不生效。)

construct: 用于拦截`new`命令

deleteProperty: 用于拦截`delete`操作,如果这个方法抛出错误或者返回`false`，当前属性就无法被`delete`命令删除。

`defineProperty()`方法拦截了`Object.defineProperty()`操作。

defineProperty()方法内部没有任何操作，只返回false，导致添加新属性总是无效。
    注意，这里的false只是用来提示操作失败，本身并不能阻止添加新属性
    
    var handler = {
      defineProperty (target, key, descriptor) {
        return false;
      }
    };
    var target = {};
    var proxy = new Proxy(target, handler);
    proxy.foo = 'bar' // 不会生效

`getOwnPropertyDescriptor()`方法拦截`Object.getOwnPropertyDescriptor()`，返回一个属性描述对象或者`undefined`。