ES6中的 Proxy 和 Reflect

Proxy

含义

在目标对象之前架设一层 拦截 ，访问该对象时必须经过这层拦截，对外界的访问进行过滤和改写

let obj = new Proxy( {}, { get: function(target, key, receiver) { console.log(`get ${key}`); return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(`set ${key}`); return Reflect.set(target, key, value, receiver); } } ); obj.count = 1; // set count ++obj.count; // get count set count

api

var proxy = new Proxy(target, handler);

target : 所要拦截的目标对象

handler : 定制拦截操作

支持 13 个拦截操作

set、get、has、deleteProperty、apply、construct …

具体参考：http://es6.ruanyifeng.com/#docs/proxy#Proxy-实例的方法

Proxy.revocable()

Proxy.revocable() 返回一个可取消的 Proxy 实例

// revoke: 取消 Proxy 实例 let { proxy, revoke } = Proxy.revocable({}, {}); proxy.foo = 123; proxy.foo; // 123 revoke(); proxy.foo; // TypeError: Revoked

当执行 revoke 函数之后，再访问 Proxy 实例，就会抛出一个错误。

this 问题

在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。

let target = { m: function() { console.log(this === proxy); } }; let handler = {}; let proxy = new Proxy(target, handler); target.m(); // false proxy.m(); // true

web 服务的客户端

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端:

const service = createWebService("http://example.com/data"); service.employees().then(json => { const employees = JSON.parse(json); // ··· });

尝尽：Proxy 可以拦截 service 对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。

function createWebService(baseUrl) { return new Proxy( {}, { get(target, propKey, receiver) { return () => httpGet(baseUrl + "/" + propKey); } } ); }

使用 Proxy 实现观察者模式

观察者模式 ：函数自动观察数据对象，一旦数据发生变化，函数就会自动执行

// person 观察目标 const person = observable({ name: "kk", age: 12 }); // print 观察者 function print() { console.log(`打印：姓名 ${person.name}, 年龄 ${person.age}`); } observe(print); person.name = "lisi";

使用 Proxy 写一个观察者模式的最简单实现，即实现 observable 和 observe 这两个函数。

思路：observable 函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数

const queuedObservers = new Set(); const observe = fn => queuedObservers.add(fn); const observable = obj => new Proxy(obj, { set }); function set(target, key, value, receiver) { // 拦截赋值操作 const result = Reflect.set(target, key, value, receiver); // 触发各个观察者 queuedObservers.forEach(observer => observer()); return result; }

Reflect

作用

从 Reflect 对象上拿语言内部的方法

修改某些 Object 方法的返回结果

比如：在无法定义属性时，Object 会抛出一个错误，Reflect 会返回 false

让 Object 命令式操作都变成函数行为

// 老写法 "assign" in Object; // true // 新写法 Reflect.has(Object, "assign"); // true

Reflect 对象的方法与 Proxy 对象的方法一一对应

Reflect 对象的 13 个静态方法

get、set、has、deleteProperty、apply、construct …

具体参考：http://es6.ruanyifeng.com/#docs/reflect#静态方法