本章内容
- 代理基础
- 代码捕获器与反射方法
- 代理模式
ECMAScript 6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
- 具体地说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用，即代理对象是目标对象的抽象。
- 在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。
- 代理对象是目标对象的抽象。
- 代理类似 C++指针，因为它可以用作目标对象的替身，但又完全独立于目标对象。
- 目标对象既可以直接被操作，也可以通过代理来操作。但直接操作会绕过代理施予的行为。
默认情况下，在代理对象上执行的所有操作都会无障碍地传播到目标对象。
因此，在任何可以使用目标对象的地方，都可以通过同样的方式来使用与之关联的代理对象。
代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出 TypeError 。
语法：
const p = new Proxy(target, handler)
参数：
- target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
- handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
/**
* 创建空proxy
*/
// 目标对象
const target = {
id: "target",
};
// 处理程序对象
const handler = {};
// 可以传一个简单的对象字面量作为处理程序对象，从而让所有操作畅通无阻地抵达目标对象。
const proxy = new Proxy(target, handler);
// id 属性会访问同一个值
console.log(target.id); // target
console.log(proxy.id); // target
// 给目标属性赋值会反映在两个对象上，因为两个对象访问的是同一个值
target.id = "foo";
console.log(target.id); // foo
console.log(proxy.id); // foo
// 给代理属性赋值会反映在两个对象上，因为这个赋值会转移到目标对象
proxy.id = "bar";
console.log(target.id); // bar
console.log(proxy.id); // bar
// hasOwnProperty()方法在两个地方都会应用到目标对象
console.log(target.hasOwnProperty("id")); // true
console.log(proxy.hasOwnProperty("id")); // true
// Proxy.prototype 是 undefined ，因此不能使用 instanceof 操作符
console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false使用代理的主要目的是可以定义捕获器（trap）。
- 捕获器就是在处理程序对象(handler)中定义的“基本操作的拦截器”。
- 捕获器在处理程序对象中以方法名为键。
- 每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。
- 每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。
const target = {
foo: "bar",
};
const handler = {
// 捕获器在处理程序对象中以方法名为键
// 当通过代理对象执行 get() 操作时，就会触发定义的 get() 捕获器。
get() {
return "handler override";
},
};
const proxy = new Proxy(target, handler);
// 当然， get() 不是ECMAScript 对象可以调用的方法。这个操作在 JavaScript 代码中可以通过多种形式触发并被 get() 捕获器拦截到。
// proxy[property] 、 proxy.property 或 Object.create(proxy)[property] 等操作都会触发基本的 get() 操作以获取属性。
// 因此所有这些操作只要发生在代理对象上，就会触发 get() 捕获器。
console.log(target.foo); // bar
console.log(proxy.foo); // handler override
console.log(target["foo"]); // bar
console.log(proxy["foo"]); // handler override
console.log(Object.create(target)["foo"]); // bar
console.log(Object.create(proxy)["foo"]); // handler override所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。
-
捕获器(traps)，类似于操作系统中捕获器的概念。
-
所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像 get() 那么简单。因此，通过手动写码如法炮制的想法是不现实的。
开发者并不需要手动重建原始行为，而是可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。
-
处理程序对象(handle)中所有可以捕获的方法都有对应的反射（Reflect）API 方法。
-
这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。
-
如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应反射 API 的空代理，那么甚至不需要定义处理程序对象。
const target = { foo: "bar", }; const proxy = new Proxy(target, Reflect); console.log(proxy.foo); // bar console.log(target.foo); // bar
其他示例：
// 捕获器基于自己的参数重建原始操作
const target1 = {
foo: "bar",
};
const handler1 = {
get(trapTarget, property, receiver) {
return trapTarget[property];
},
};
const proxy1 = new Proxy(target1, handler1);
console.log(proxy1.foo); // bar
console.log(target1.foo); // bar
// 使用反射（Reflect）API 方法
const target = {
foo: "bar",
};
const handler = {
get: Reflect.get,
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // bar
console.log(target.foo); // bar使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。
- 根据 ECMAScript 规范，每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant，也称约束）。
- 捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。
说明：不同 handler 的方法有其对应有具体的不变式(约束)的说明。
- 如果违背了以下的约束，proxy 会抛出 TypeError:
- 如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同。
- 如果要访问的目标属性没有配置访问方法，即 get 方法是 undefined 的，则返回值必须为 undefined。
- 如果违背以下的约束条件，proxy 会抛出一个 TypeError 异常：
- 若目标属性是一个不可写及不可配置的数据属性，则不能改变它的值。
- 如果目标属性没有配置存储方法，即 [Set] 属性的是 undefined，则不能设置它的值。
- 在严格模式下，如果 set() 方法返回 false，那么也会抛出一个 TypeError 异常。
有时候可能需要中断代理对象与目标对象之间的联系。
对于使用 new Proxy() 创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。
Proxy 也暴露了 revocable() 方法，这个方法支持撤销代理对象与目标对象的关联。
撤销代理的操作是不可逆的。
- 撤销函数（ revoke() ）是幂等的，调用多少次的结果都一样。
- 撤销代理之后再调用代理会抛出 TypeError 。
- 撤销函数和代理对象是在实例化时同时生成的。
const target = {
foo: "bar",
};
const handler = {
get() {
return "intercepted";
},
};
// 撤销函数和代理对象是在实例化时同时生成的。
const { proxy, revoke } = Proxy.revocable(target, handler);
console.log(proxy.foo); // intercepted
console.log(target.foo); // bar
// 撤销函数（ revoke() ）是幂等的，调用多少次的结果都一样。
revoke();
revoke();
// 撤销代理之后再调用代理会抛出 TypeError 。
console.log(proxy.foo); // TypeError: Cannot perform 'get' on a proxy that has been revoked某些情况下应该优先使用反射 API(eflect API)。
在使用反射 API 时，要记住：
- (1) 反射 API 并不限于捕获处理程序；
- (2) 大多数反射 API 方法在 Object 类型上有对应的方法。
通常， Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。
- 有时候，状态标记比那些返回修改后的对象或者抛出错误（取决于方法）的反射 API 方法更有用。
以下反射方法都会提供状态标记：
- 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-
代理中的 this
方法中的 this 通常指向调用这个方法的对象，如果目标对象依赖于对象标识(例如 WeakMap)，那就可能碰到意料之外的问题。
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);
}
}
const user = new User(123);
console.log(user.id); // 123
// 因为 User 实例一开始使用目标对象作为 WeakMap 的键，代理对象却尝试从自身取得这个实例。
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id); // undefined
// 要解决这个问题，就需要重新配置代理，把代理 User 实例改为代理 User 类本身。
// 之后再创建代理的实例就会以代理实例作为 WeakMap 的键了
const UserClassProxy = new Proxy(User, {});
const proxyUser = new UserClassProxy(456);
console.log(proxyUser.id); // 456-
代理与内部槽位
代理与内置引用类型（比如 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 操作会调用同一个捕获器处理程序。
- 对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。
具体的方法可参考详情页面。
| 捕获器 | 对应的 Reflect API 方法 | 作用 |
|---|---|---|
| get() | Reflect.get() | 会在获取属性值的操作中被调用。 |
| set() | Reflect.set() | 在设置属性值的操作中被调用。 |
| apply() | Reflect.apply() | 在调用函数时中被调用。 |
| construct() | Reflect.construct() | 在 new 操作符中被调用。 |
| has() | Reflect.has() | 针对 in 操作符的代理方法。 |
| deleteProperty() | Reflect.deleteProperty() | 在 delete 操作符中被调用。 |
| defineProperty() | Reflect.defineProperty() | 在 Object.defineProperty() 中被调用。 |
| getOwnPropertyDescriptor() | Reflect.getOwnPropertyDescriptor() | 在 Object.getOwnPropertyDescriptor() 中被调用。 |
| ownKeys() | Reflect.ownKeys() | 在 Object.keys() 及类似方法中被调用。 |
| getPrototypeOf() | Reflect.getPrototypeOf() | 在 Object.getPrototypeOf() 中被调用。 |
| setPrototypeOf() | Reflect.setPrototypeOf() | 在 Object.setPrototypeOf() 中被调用。 |
| isExtensible() | Reflect.isExtensible() | 在 Object.isExtensible() 中被调用。 |
| preventExtensions() | Reflect.preventExtensions() | 在 Object.preventExtensions() 中被调用。 |
使用代理可以在代码中实现一些有用的编程模式。可在 MDN 查看更多Proxy 使用示例。
-
跟踪属性访问
-
隐藏属性
-
属性验证
// 因为所有赋值操作都会触发 set() 捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值： const target = { onlyNumbersGoHere: 0, }; const proxy = new Proxy(target, { // 如果赋值不是number类型，则拒绝赋值 set(target, property, value) { if (typeof value !== "number") { return false; } else { return Reflect.set(...arguments); } }, }); proxy.onlyNumbersGoHere = 1; console.log(proxy.onlyNumbersGoHere); // 1 proxy.onlyNumbersGoHere = "2"; console.log(proxy.onlyNumbersGoHere); // 1
-
函数与构造函数参数验证
-
数据绑定与可观察对象
const observerQueue = new Set(); const observe = (fn) => observerQueue.add(fn); const observable = (obj) => new Proxy(obj, { set(tgt, key, val, receiver) { const result = Reflect.set(tgt, key, val, receiver); observerQueue.forEach((v) => v()); return result; }, }); const person = observable({ age: 28, name: "Cash" }); const print = () => console.log(`${person.name} is ${person.age} years old`); observe(print); // David is 28 years old // 没有这句赋值，不会触发observable中的set，那observe(print)也不会执行，则不会有打印。 person.name = "David";
-
值修正及附加属性
-
数组扩展了一些实用工具
Proxy 是 ECMAScript 6 新增的令人兴奋和动态十足的新特性。尽管不支持向后兼容，但它开辟出了一片前所未有的 JavaScript 元编程及抽象的新天地。
从宏观上看，Proxy 是真实 JavaScript 对象的透明抽象层。
- Proxy 可以定义包含捕获器(trap)的处理程序对象(handler)，而这些捕获器可以拦截绝大部分 JavaScript 的基本操作和方法。
- 在这个捕获器处理程序中，可以修改任何基本操作的行为，当然前提是遵从捕获器不变式(invariants)。
与 Proxy 如影随形的 Reflect API，则封装了一整套与捕获器拦截的操作相对应的方法。
- 可以把 Reflect API 看作一套基本操作，这些操作是绝大部分 JavaScript 对象 API 的基础。
Proxy 的应用场景是不可限量的。
- 开发者使用它可以创建出各种编码模式，比如（但远远不限于）跟踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定，以及可观察对象。