ECMAScript 2018 中的代理对象实现
ECMAScript 2018 给 JavaScript 带来了很多新特性，其中代理对象是一个很有趣的特性，它极大地拓展了 JavaScript 对象的功能。代理对象可以在对象的读取和设置属性时注入自定义的逻辑，这使得 JavaScript 对象的行为可以像函数一样灵活。本文将讨论代理对象的实现细节，以及如何使用它们来优化 JavaScript 程序。
- 代理对象简介
代理对象是 ECMAScript 2018 新增的一个特性。它允许开发者通过创建一个代理对象来拓展对象的行为，并且可以控制对象属性的读取和设置。代理对象本质上是一个对象，但它可以拦截另一个对象的操作，例如读取、设置、函数调用等。
代理对象有两个参数：
- 目标对象：被代理的对象。
- 拦截器对象：一个包含一组拦截操作的对象。
我们可以通过使用 Proxy 构造函数创建一个代理对象：
-- -------------------- ---- ------- ----- ------ - --- ----- ------- - - ---- ---------------- ----- --------- - -------------------- ---------- ------ ------------------- ----- ---------- -- ---- ---------------- ----- ------ --------- - -------------------- ------------------- ------ ------------------- ----- ------ ---------- - -- ----- ----- - --- ------------- --------- --------- - ------ ----------展开代码
输出：
Setting foo=bar Getting foo
上面的例子中，我们通过 Proxy 构造函数创建了一个代理对象，可以看到代理对象的读取和设置操作被拦截了。当我们将属性设置为 'bar' 时，拦截器对象里的 set 函数被调用；当我们读取属性 'foo' 时，拦截器对象里的 get 函数被调用。
- 拦截器操作
拦截器对象包含一组拦截操作，它们都是可选的。当代理对象进行读取和设置操作时，会依次触发相应的拦截器操作。拦截器对象包含以下几个操作：
- get: 拦截对象属性的读取操作。
- set: 拦截对象属性的设置操作。
- has: 拦截 in 操作符。
- deleteProperty: 拦截 delete 操作符。
- ownKeys: 拦截 Object.keys 等枚举操作。
- apply: 拦截函数的调用。
- construct: 拦截实例对象的构造。
以下是拦截器操作的详细说明：
2.1 get 拦截器
拦截器对象的 get 操作用于拦截属性读取操作。其函数签名为：
get(target: object, prop: PropertyKey, receiver: object): any;
其中：
- target：目标对象。
- prop：属性的键。
- receiver：操作发生的对象。
在该函数内，我们可以返回代理对象的属性值，或者进行其他的操作。例如，我们可以在读取属性时进行一些计算，有以下例子：
-- -------------------- ---- ------- ----- --- - - -- -- -- - -- ----- ----- - --- ----------- ----------- ---- - ------ -- ------ - ------ -------- - --------- - ------ ------------ - --- ---------------------- -- -展开代码
在这个例子中，我们创建了一个代理对象来计算属性的和。当 'sum' 被访问时，它会返回目标对象的 x 和 y 的和值。
2.2 set 拦截器
set 拦截器用于拦截属性的设置操作。其函数签名为：
set(target: object, prop: PropertyKey, value: any, receiver: object): boolean;
其中：
- target：目标对象。
- prop：属性的键。
- value：要设置的属性值。
- receiver：操作发生的对象。
在该函数内，我们可以返回 true 或 false 来表示属性的值是否成功设置。例如，以下例子将拦截器对象里的 set 函数返回 false，这将导致属性无法设置：
const obj = {}; const proxy = new Proxy(obj, { set(target, prop, value, receiver) { return false; } }); proxy.foo = 'bar'; console.log(obj); // {}
在这个例子中，我们在代理对象里设置了 set 拦截器，它将所有属性的设置操作都拦截并返回 false。所以当我们设置属性 'foo' 时，它会被拦截并失败。
2.3 has 拦截器
has 拦截器拦截 in 操作符。其函数签名为：
has(target: object, prop: PropertyKey): boolean;
其中：
- target：目标对象。
- prop：属性的键。
在该函数内，我们可以返回一个布尔值，指示目标对象是否存在属性 prop。例如：
const obj = { foo: 'bar' }; const proxy = new Proxy(obj, { has(target, prop) { return target.hasOwnProperty(prop); } }); console.log('foo' in proxy); // true console.log('baz' in proxy); // false
在这个例子中，我们在代理对象里设置了 has 拦截器，它将检查目标对象中是否存在指定的属性。当我们检查 'foo' 是否存在时，代理对象返回 true，当我们检查 'baz' 是否存在时，代理对象返回 false。
2.4 deleteProperty 拦截器
deleteProperty 拦截器拦截 delete 操作符。其函数签名为：
deleteProperty(target: object, prop: PropertyKey): boolean;
其中：
- target：目标对象。
- prop：属性的键。
在该函数内，我们可以返回一个布尔值，指示属性是否删除成功。例如：
-- -------------------- ---- ------- ----- --- - - ---- ----- -- ----- ----- - --- ---------- - ---------------------- ----- - ------------------ ------ ------------------------------ ------ - --- ------ ---------- -- ---- --- ----------------- -- --展开代码
在这个例子中，我们在代理对象里设置了 deleteProperty 拦截器，它将会在删除属性时被调用。当我们删除代理对象中的 'foo' 时，目标对象的'foo' 被删除并返回 true。
2.5 ownKeys 拦截器
ownKeys 拦截器用于拦截 Object.keys 等枚举操作。其函数签名为：
ownKeys(target: object): PropertyKey[];
其中：
- target：目标对象。
在该函数内，我们可以返回一个数组，其中包含目标对象的所有属性的键。例如：
const obj = { foo: 'bar', baz: 'qux' }; const proxy = new Proxy(obj, { ownKeys(target) { const keys = Reflect.ownKeys(target).filter(key => key !== 'baz'); return keys; } }); console.log(Object.keys(proxy)); // ['foo']
在这个例子中，我们在代理对象里设置了 ownKeys 拦截器，它将返回目标对象的所有键，但过滤了键 'baz'。
2.6 apply 拦截器
apply 拦截器用于拦截函数调用。其函数签名为：
apply(target: Function, thisArg: any, args: any[]): any;
其中：
- target：目标函数。
- thisArg：被调用的函数的 this 值。
- args：函数参数数组。
在该函数内，我们可以拦截函数的调用，并返回一个值。例如：
const func = (a, b) => a + b; const proxy = new Proxy(func, { apply(target, thisArg, args) { console.log(`Call ${target.name}(${args.join(', ')})`); return target(...args); } }); proxy(1, 2);
在这个例子中，我们在代理对象里设置了 apply 拦截器，它将在代理对象被调用时被调用。当我们调用代理函数时，它将记录函数调用，并返回函数的结果。
2.7 construct 拦截器
construct 拦截器用于拦截实例对象的构造方法。其函数签名为：
construct(target: Function, args: any[], newTarget: any): object;
其中：
- target：被调用的构造函数。
- args：构造函数参数数组。
- newTarget：被构造的实例对象的构造方法。
在该函数内，我们可以拦截实例对象的构造方法，并返回一个新的实例对象。例如：
-- -------------------- ---- ------- ----- --- - -------------- - ------ - -- - - ----- ----- - --- ---------- - ----------------- ----- - ------------------------- -------------- ---- ---------- ------ --- ---------------- - --- ----- --- - --- ------------- ------ ------------ --- ---- --- --------------- ---------- ----- -- ---- ------------------- -- -----展开代码
在这个例子中，我们在代理对象里设置了 construct 拦截器，它将在实例对象被构造时被调用。当我们构造实例对象时，它将记录构造操作，并返回一个新的实例对象。
- 代理对象的优化
代理对象很强大，但也很危险。在使用代理对象时要小心，在判断代理对象是否符合要求时要牢记代理对象的结构。对于代理对象，我们可以进行以下优化：
3.1 懒初始化
代理对象通常是被使用时才创建的，如果代理对象处于不活动状态，我们可以像以下方法一样进行懒初始化：
-- -------------------- ---- ------- --- ---------- - ----- -------- ---------- - --------------- - ----- ------ - ------ ----- ------- - ------ ---------- - --- ------------- -------- - ------ ----------- -展开代码
在这个例子中，我们将代理对象缓存起来，第一次调用 getProxy 时，目标对象和拦截器对象都将被生成并使用，随后的调用都会返回已生成的代理对象。
3.2 缓存对象
代理对象是动态生成的，因此在代理对象的操作过程中，重复读取相同属性的代价是很大的。我们可以使用 WeakMap 对象来实现代理对象的缓存：
-- -------------------- ---- ------- ----- ----- - --- ---------- -------- ------------ - -- ---------------- - ------ --------------- - ----- ----- - --- ---------- ------- -------------- ------- ------ ------ -展开代码
在这个例子中，我们使用 WeakMap 对象来缓存代理对象，当缓存中已经存在相同的代理对象时，我们可以重复使用已经存在的代理对象。
- 总结
在 ECMAScript 2018 中，代理对象是一个非常强大的特性。代理对象为 JavaScript 中的对象添加了许多新功能，并且可以被用于在对象读取和设置属性时注入自定义逻辑。使用代理对象可以优化 JavaScript 程序的运行效率，给程序带来更好的性能和用户体验。但是应该注意代理对象存在的风险，使用时应仔细考虑代理对象的结构和操作。在使用代理对象时，要注意代理对象的缓存和懒初始化，从而优化程序性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f92ee8f6b2d6eab30c037c
