概述
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
语法
1
2
3
4
// 使用 new 创建一个 Proxy
// target 是被代理的对象
// handler 也是一个对象，配置要拦截的操作
var proxy = new Proxy(target, handler);
例如拦截一个对象的 get 函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义 target 和 handler
var target = { name: 'wtg' };
var handler = {
// get 是 Proxy 支持的 13 种拦截之一
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
}
};
// 创建 proxy
var proxy = new Proxy(target, handler);
// 通过 proxy 调用，直接通过 target 调用不会被拦截
proxy.name; // getting name!
target.name; // 不会执行 console
Proxy支持的13种拦截
target 是被代理的对象， propKey 是被操作属性的名称， value 是set操作传入的值，receiver 总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例，也可能是指向 target。
- 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)。
几种示例
实现数组读取负数的索引
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createArray(...elements) {
let handler = {
get(target, propKey, receiver) {
let index = Number(propKey);
if (index < 0) {
propKey = String(target.length + index);
}
return Reflect.get(target, propKey, receiver);
}
};
let target = [];
target.push(...elements);
return new Proxy(target, handler);
}
let arr = createArray('a', 'b', 'c');
arr[-1] // c
使用has方法隐藏某些属性，不被in运算符发现
1
2
3
4
5
6
7
8
9
10
11
var handler = {
has (target, key) {
if (key[0] === '_') {
return false;
}
return key in target;
}
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false
Web 服务的客户端
Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 创建一个 webservice 客户端代理, Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。
function createWebService(baseUrl) {
return new Proxy({}, {
get(target, propKey, receiver) {
return () => httpGet(baseUrl + '/' + propKey);
}
});
}
const service = createWebService('http://example.com/data');
// employees 会传入 propKey，因此可以通过函数名控制访问服务端不同的接口
// httpGet 返回的 promise 可以处理返回数据
service.employees().then(json => {
const employees = JSON.parse(json);
// ···
});
上面的代码非常有用，如果结合 Ant Design 中的一些 UI 组件，就可以进行简洁的业务封装，传入一个 url 自动实现增删改查接口，下次到项目中实现一下！
this问题
虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。
这个会导致某些问题，比如某些对象无法被代理。