ES6：Proxy与Reflect学习笔记

Proxy

Proxy 是什么

通过调用new Proxy()，可以创建一个代理用来代替另一个对象，实现基本操作的拦截和自定义。这个代理与目标对象表面上可以被当作同一个对象来看待。

关于Proxy有几个术语：

• traps：捕获器，提供访问属性的方法。
• handler：处理器，一个定义了一个或多个捕获器的对象。
• target：被Proxy代理虚拟化的对象。

通过如下方式，即可创建一个Proxy：

const p = new Proxy(target, handler);

两个参数即对应上述的相应术语。

traps 捕获器

handler是一个包含了多个捕获器的对象。所有捕获器都是可选的，若handler对象上没有定义捕获器，则Proxy就会保留目标对象的默认行为。

下面是常见的捕获器：

捕获器	被重写的行为
get	读取一个属性的值
set	写入一个属性
has	in运算符
deleteProperty	delete运算符
getPrototypeOf	Object.getPrototypeOf()
setPrototypeOf	Object.setPrototypeOf()
isExtensible	Object.isExtensible()
preventExtensions	Object.preventExtensions()
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor()
defineProperty	Object.defineProperty()
ownKeys	Object.keys、Object.getOwnPropertyNames()与Object.getOwnPropertySymbols()
apply	调用一个函数
construct	new操作符

简单使用

以下代码将所有应用到Proxy的操作，转发到obj对象上。

const obj = {};
const p = new Proxy(obj, {});

p.a = 37;

console.log(obj.a); // 37

Reflect

Reflect 是什么

Reflect是一个内置对象，但不是一个构造函数，不能通过new操作符来进行实例化。

Reflect提供了拦截 JavaScript 操作的方法，这些方法与Proxy中handler上的捕获器相同。

比如Reflect.set()是set捕获器函数对应的反射方法，同时也是set操作的默认行为。Reflect.set()与set方法的函数参数相同，可以在捕获器函数中方便地调用。

简单使用

如下所示，使用Reflect.has检验obj对象上是否存在name、say属性。

const obj = {
  name: 'Jack',
  age: 18
};

Reflect.has(obj, 'name'); // true
Reflect.has(obj, 'say'); // false

拦截对象默认行为举例

使用 set 验证属性值

如下代码所示，代理了对象obj，当设置新属性或者更改属性时，被set捕获器拦截。为了防止影响obj已有的属性，trapTarget.hasOwnProperty(key)加以判断。若传入的参数不是数字时，排除错误。否则通过Reflect.set执行其默认行为。

const obj = {
  name: 'Jack'
};
const proxy = new Proxy(obj, {
  set(trapTarget, key, value, receiver) {
    if (!trapTarget.hasOwnProperty(key)) {
      if (isNaN(value)) {
        throw new TypeError('Property must be a number.');
      }
    }
    return Reflect.set(trapTarget, key, value, receiver);
  }
});

proxy.age = 18;
console.log(proxy.age); // 18
console.log(obj.age); // 18

// 已有的属性不受影响
proxy.name = 'Tom';
console.log(proxy.name); // Tom
console.log(obj.name); // Tom

// 抛出错误，定义新属性时，值必须是数字
proxy.other = 'other';

防止访问对象不存在的属性

我们知道，在 JavaScript 中，访问一个对象上不存在的属性时，并不会报错，而是会返回undefined。

const obj = {};
console.log(obj.name); // undefined

这可能引发严重的问题，使用Proxy拦截，可以避免此问题。

如下代码所示，拦截空对象obj的访问行为，当访问obj的属性时，判断访问的key是否存在与对象上，若不存在，抛出错误。存在则使用Reflect.get执行get的默认行为。

const obj = {};

const p = new Proxy(obj, {
  get(trapTarget, key, receiver) {
    if (!(key in receiver)) {
      throw new TypeError(`Property ${key} doesn't exist.`);
    }
    return Reflect.get(trapTarget, key, receiver);
  }
});

obj.name = 'Jack';
// 访问存在的属性
console.log(p.name); // Jack

// 访问不存在的属性，报错
console.log(p.age); // TypeError: Property age doesn't exist.

防止对象属性被删除

如下代码所示，拦截对象的deleteProperty操作，当删除对象的属性时，被拦截。若将要删除的属性键名为id，则抛出错误，阻止删除。若不为id，则执行Reflect.deleteProperty的默认操作，删除属性。

const obj = {
  id: '123',
  name: 'Jack'
};

const p = new Proxy(obj, {
  deleteProperty(trapTarget, key) {
    if (key === 'id') {
      throw new TypeError(`property ${key} can't be deleted.`);
    } else {
      return Reflect.deleteProperty(trapTarget, key);
    }
  }
});

delete p.name;
console.log(p); // { id: '123' }

delete p.id;
console.log(p); // TypeError: property id can't be deleted.

---

参考：

• Proxy - MDN
• Reflect - MDN