代理与反射
ECMAScript 6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说,可以给目标对象定义一个关联的代理对象,而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前,可以在代理对象中对这些操作加以控制。
代理基础
正如开头所介绍的,代理是目标对象的抽象。从很多方面看,代理类似 C++指针,因为它可以用作目标对象的替身,但又完全独立于目标对象。目标对象既可以直接被操作,也可以通过代理来操作。但直接操作会绕过代理施予的行为。
创建空代理
最简单的代理是空代理,即除了作为一个抽象的目标对象,什么也不做。默认情况下,在代理对象上执行的所有操作都会无障碍地传 播到目标对象。因此,在任何可以使用目标对象的地方,都可以通过同样的方式来使用与之关联的代理对象。
代理是使用 Proxy
构造函数创建的。这个构造函数接收两个参数:目标对象和处理程序对象。缺少其中任何一个参数都会抛出 TypeError。要创建空代理,可以传一个简单的对象字面量作为处理程序对象,从而让所有操作畅通无阻地抵达目标对象。
// 目标对象
const target = {
id: 'target',
};
const handler = {};
// 抽象的目标对象
const proxyTarget = new Proxy(target, handler);
// 访问目标对象和抽象的目标对象
console.log(target.id, proxyTarget.id); // target | target
// 修改目标对象
target.id = 'new target';
console.log(target.id, proxyTarget.id); // new target | new target
// 修改抽象的目标对象
proxyTarget.id = 'new proxyTarget';
console.log(target.id, proxyTarget.id); // new proxyTarget | new proxyTarget
// 严格相等可以用来区分代理和目标
console.log(target === proxyTarget); // false
定义捕获器
使用代理的主要目的是可以定义捕获器(trap)。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器,每个捕获器都对应一种基本操作,可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时,代理可以在这些操作传播到目标对象之前先调用捕获器函数,从而拦截并修改相应的行为。
定义一个最简单的捕获器 handler.get()
, get()
方法用于拦截对象的读取属性操作。它接收三个参数:
-
target
: 目标对象。 -
property
: 被获取的属性名。 -
receiver
:Proxy
或者继承Proxy
的对象。
const target = {
id: 'target',
};
const handler = {
get(target, property, receiver) {
console.log(target, property, receiver);
},
};
const proxyTarget = new Proxy(target, handler);
proxyTarget.id;
// { id: 'target' }
// id
// Proxy(Object) { id: 'target' }
get()
捕获器会在代理对象上执行的属性访问操作中被触发,包括使用 proxy[property]
、proxy.property
或 Object.create(proxy)[property]
等形式。只有当这些操作发生在代理对象上时,捕获器才会被触发。如果这些操作在目标对象上执行,它们会产生正常的行为,而不会触发捕获器。这种行为允许开发者在代理对象上对属性的访问行为进行自定义和控制。
捕获器参数和反射API
所有捕获器都可以访问相应的参数,基于这些参数可以重建被捕获方法的原始行为。比如,get()
捕获器会接收到目标对象、要查询的属性和代理对象三个参数。
const target = {
id: 'target',
};
const handler = {
get(trapTarget, property, receiver) {
console.log(trapTarget === target);
console.log(property);
console.log(receiver === proxyTarget);
},
};
const proxyTarget = new Proxy(target, handler);
proxyTarget.id;
// true
// id
// true
通过这些参数重建捕获方法的原始行为:
const handler = {
get(trapTarget, property, receiver) {
return trapTarget[property];
},
};
所有捕获器都可以基于自己的参数重建原始操作,但并非所有捕获器行为都像 get()
那么简单。因此,通过手动写码如法炮制的想法是不现实的。实际上,开发者并不需要手动重建原始行为,而是可以通过调用全局 Reflect
对象上(封装了原始行为)的同名方法来轻松重建。
处理程序对象中所有可以捕获的方法都有对应的反射(Reflect)API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名,而且也具有与被拦截方法相同的行为。因此,使用反射 API 也可以像下面这样定义出空代理对象:
const handler = {
get() {
return Reflect.get(...arguments);
},
};
// 更简洁的方式
const newHandler = {
get: Reflect.get,
};
事实上,如果真想创建一个可以捕获所有方法,然后将每个方法转发给对应反射 API 的空代理,那么甚至不需要定义处理程序对象:
const target = {
id: 'target',
};
const proxy = new Proxy(target, Reflect);
捕获器不变式(约束)
使用捕获器几乎可以改变所有基本方法的行为,但也不是没有限制。根据 ECMAScript 规范,每个捕获的方法都知道目标对象上下文、捕获函数签名,而捕获处理程序的行为必须遵循“捕获器不变式(约束)”(trap invariant)。捕获器不变式(约束)因方法不同而异,但通常都会防止捕获器定义出现过于反常的行为。
比如,如果目标对象有一个不可配置且不可写的数据属性,那么在捕获器返回一个与该属性不同的值时,会抛出 TypeError:
const target = {};
Object.defineProperty(target, 'foo', {
configurable: false,
writable: false,
value: 'bar',
});
const handler = {
get() {
return 'qux';
},
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo);
// TypeError
可撤销代理
有时候可能需要中断代理对象与目标对象之间的联系。对于使用 new Proxy()
创建的普通代理来说,这种联系会在代理对象的生命周期内一直持续存在。
Proxy
也暴露了 revocable()
方法,这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且,撤销函数(revoke())是幂等的,调用多少次的结果都一样。撤销代理之后再调用代理会抛出 TypeError。
Proxy.revocable()
方法可以用来创建一个可撤销的代理对象。返回一个包含了代理对象本身和它的撤销方法的可撤销 Proxy
对象,其结构为 {"proxy": proxy, "revoke": revoke}
。
const target = { name: 'Sean' };
const { proxy, revoke } = Proxy.revocable(target, Reflect);
console.log(proxy.name);
// 调用 revoke 撤销代理
revoke();
console.log(proxy.name); // TypeError
实用反射 API
某些情况下应该优先使用反射 API,这是有一些理由的。
反射 API 与对象 API
- 反射 API 并不限于捕获处理程序;
- 大多数反射 API 方法在 Object 类型上有应对的方法。
反射 API 的应用远不止于捕获处理程序,它提供了一种更灵活的方式来操作和处理 JavaScript 对象。通常,Object 上的方法适用于通用程序,而反射方法适用于细粒度的对象控制与操作。
代理状态
很多反射方法返回称作“状态标记”的布尔值,表示意图执行的操作是否成功。有时候,状态标记比那些返回修改后的对象或者抛出错误(取决于方法)的反射 API 方法更有用。
const o = {};
let result = Reflect.defineProperty(o, 'foo', { value: 'bar' });
if (result) {
console.log('属性写入成功');
} else {
console.log('属性写入失败');
}
以下反射方法都会提供状态标记:
-
Reflect.defineProperty()
-
Reflect.preventExtensions()
-
Reflect.setPrototypeOf()
-
Reflect.set()
-
Reflect.deleteProperty()
用一等函数替代操作符
以下反射方法提供只有通过操作符才能完成的操作。
-
Reflect.get()
:可以替代对象属性访问操作符。 -
Reflect.set()
:可以替代=
赋值操作符。 -
Reflect.has()
:可以替代in
操作符或with()
。 -
Reflect.deleteProperty()
:可以替代delete
操作符。 -
Reflect.construct()
:可以替代new
操作符。
安全地应用函数
在通过 apply 方法调用函数时,被调用的函数可能也定义了自己的 apply 属性(虽然可能性极小)。为绕过这个问题,可以使用定义在 Function 原型上的 apply 方法,比如:
Function.prototype.apply.call(myFunc, thisVal, argumentList);
这种可怕的代码完全可以使用 Reflect.apply
来避免:
Reflect.apply(myFunc, thisVal, argumentsList);
代理另一个代理
代理可以拦截反射 API 的操作,而这意味着完全可以创建一个代理,通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网:
const target = {
foo: 'bar',
};
const firstProxy = new Proxy(target, {
get() {
console.log('first proxy');
return Reflect.get(...arguments);
},
});
const secondProxy = new Proxy(firstProxy, {
get() {
console.log('second proxy');
return Reflect.get(...arguments);
},
});
console.log(secondProxy.foo);
// second proxy
// first proxy
// bar
代理的问题与不足
代理是在 ECMAScript 现有基础之上构建起来的一套新 API,因此其实现已经尽力做到最好了。很大程度上,代理作为对象的虚拟层可以正常使用。但在某些情况下,代理也不能与现在的 ECMAScript机制很好地协同。
代理中的 this
代理潜在的一个问题来源是 this 值。我们知道,方法中的 this 通常指向调用这个方法的对象:
const target = {
thisValEqualsProxy() {
return this === proxy;
},
};
const proxy = new Proxy(target, {});
console.log(target.thisValEqualsProxy()); // false
console.log(proxy.thisValEqualsProxy()); // true
从直觉上讲,这样完全没有问题:调用代理上的任何方法,比如 proxy.outerMethod()
,而这个方法进而又会调用另一个方法,如 this.innerMethod()
,实际上都会调用 proxy.innerMethod()
。多数情况下,这是符合预期的行为。可是,如果目标对象依赖于对象标识,那就可能碰到意料之外的问题。
const wm = new WeakMap();
class User {
constructor(userId) {
wm.set(this, userId);
}
set id(userId) {
wm.set(this, userId);
}
get id() {
return wm.get(this);
}
}
/**
* 由于这个实现依赖 User 实例的对象标识,在这个实例被代理的情况下就会出问题:
*/
const user = new User(123);
console.log(user.id); // 123
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id); // undefined
这是因为 User 实例一开始使用目标对象作为 WeakMap
的键,代理对象却尝试从自身取得这个实例。要解决这个问题,就需要重新配置代理,把代理 User 实例改为代理 User 类本身。之后再创建代理的实例就会以代理实例作为 WeakMap
的键了:
const UserClassProxy = new Proxy(User, {});
const proxyUser = new UserClassProxy(456);
console.log(proxyUser.id);
代理与内部槽位
代理与内置引用类型(比如 Array)的实例通常可以很好地协同,但有些 ECMAScript 内置类型可能会依赖代理无法控制的机制,结果导致在代理上调用某些方法会出错。
一个典型的例子就是 Date 类型。根据 ECMAScript 规范,Date 类型方法的执行依赖 this 值上的内部槽位 [[NumberDate]]
。代理对象上不存在这个内部槽位,而且这个内部槽位的值也不能通过普通的 get()
和 set()
操作访问到,于是代理拦截后本应转发给目标对象的方法会抛出 TypeError:
const target = new Date();
const proxy = new Proxy(target, {});
console.log(proxy instanceof Date); // true
proxy.getDate(); // TypeError: 'this' is not a Date object
代码捕获器与反射方法
代理可以捕获 13 种不同的基本操作。这些操作有各自不同的反射 API 方法、参数、关联 ECMAScript操作和不变式。
正如前面示例所展示的,有几种不同的 JavaScript 操作会调用同一个捕获器处理程序。不过,对于 在代理对象上执行的任何一种操作,只会有一个捕获处理程序被调用。不会存在重复捕获的情况。
只要在代理上调用,所有捕获器都会拦截它们对应的反射 API 操作。
get()
get()
捕获器会在获取属性值的操作中被调用。对应的反射 API 方法为 Reflect.get()
。
const myTarget = {};
const proxy = new Proxy(myTarget, {
get(target, property, receiver) {
console.log('触发 get() 捕获器');
return Reflect.get(...arguments);
},
});
proxy.foo;
// 触发 get() 捕获器
返回值
get
方法可以返回任何值。
触发拦截的操作
-
proxy.property
-
proxy[property]
-
Object.create(proxy)[property]
-
Reflect.get(proxy, property, receiver)
捕获器处理程序参数
-
target
:目标对象。 -
property
:引用的目标对象上的字符串键属性。 -
receiver
:代理对象或继承代理对象的对象。
捕获器不变式(约束)
如果 target.property
不可写且不可配置,则处理程序返回的值必须与 target.property
匹配。
如果 target.property
不可配置且 [[Get]]
特性为 undefined
,处理程序的返回值也必须是 undefined
。
set()
set()
捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.set()
。
const myTarget = {};
const proxy = new Proxy(myTarget, {
set(target, property, value, receiver) {
console.log('触发 set() 捕获器');
return Reflect.set(...arguments);
},
});
proxy.foo = 'bar';
// 触发 set() 捕获器
返回值
返回 true
表示成功;返回 false
表示失败,严格模式下会抛出 TypeError。
触发拦截的操作
-
proxy.property = value
-
proxy[property] = value
-
Object.create(proxy)[property] = value
-
Reflect.set(proxy, property, value, receiver)
捕获器处理程序参数
-
target
:目标对象。 -
property
:引用 的目标对象上的字符串键属性。 -
value
:要赋给属性的值。 -
receiver
:接收最初赋值的对象。
捕获器不变式(约束)
如果 target.property
不可写且不可配置,则不能修改目标属性的值。
如果 target.property
不可配置且[[Set]]
特性为 undefined
,则不能修改目标属性的值。在严格模式下,处理程序中返回 false
会抛出 TypeError。
has()
has()
捕获器会在 in
操作符中被调用。对应的反射 API 方法为 Reflect.has()
。
const myTarget = {};
const proxy = new Proxy(myTarget, {
has(target, property) {
console.log('触发 has() 捕获器');
return Reflect.has(...arguments);
},
});
'foo' in proxy;
// 触发 has() 捕获器