在 ES6 中，代理对象是一个非常有用的功能，它允许我们在某个对象之前添加一层拦截器。代理对象可以拦截对象属性的访问，方法的调用，以及一些边缘情况的处理，从而为我们的代码添加更多的控制力和灵活性。
创建代理对象
创建代理对象的方式非常简单：使用 Proxy 构造函数，传入两个参数：被代理的对象和用于拦截的处理程序对象。例如：
-- -------------------- ---- -------
----- ------ - ---
----- ------- - -
---- ---------------- -------- --------- -
-------------------- ------------ ---- ------ ----------
------ ------------------- -------- ----------
--
---- ---------------- -------- ------ --------- -
-------------------- ------------ -- ---------- ---- ------ ----------
------ ------------------- -------- ------ ----------
-
--
----- ----- - --- ------------- ---------在这个例子中，我们创建了一个空对象 target，并使用一个处理程序 handler 来代理它。这个处理程序使用了两个方法：get 拦截属性的读取操作，set 拦截属性的设置操作。最后，我们使用 new Proxy 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
拦截属性访问（get）
代理对象的最基本功能是拦截属性的访问操作，即 get。在 handler 对象中加入以下代码，可以在访问 proxy 对象的属性时打印出一段调试信息：
const handler = {
get: function(target, propKey, receiver) {
console.log(`Reading "${propKey}" from target object.`);
return Reflect.get(target, propKey, receiver);
}
};这段代码使用了 Reflect.get 方法，它返回 target[propKey] 的值。可以看到，为了保证代码的正常运行，我们需要显式地返回这个值。然后，在这个函数中可以添加其他代码，例如调用回调函数或是记录日志。
拦截属性赋值（set）
除了拦截属性的访问操作，代理对象还可以拦截属性的赋值操作，即 set。在 handler 对象中添加以下代码，可以在设置 proxy 对象的属性时打印出一段调试信息：
const handler = {
set: function(target, propKey, value, receiver) {
console.log(`Setting "${propKey}" to "${value}" from target object.`);
return Reflect.set(target, propKey, value, receiver);
}
};这段代码使用了 Reflect.set 方法，它设置 target[propKey] 的值为 value。可以看到，同样需要显式地返回这个值以便于代码运行。需要注意的是，这个函数中有一个参数 receiver，代表设置属性的对象，而非代理对象。
其他操作
除了 get 和 set 操作之外，代理对象还可以拦截很多其他操作。例如：
has：拦截in操作apply：拦截函数调用construct：拦截new操作- ...
关于代理对象的详细 API 可以查看 MDN 文档。
代理实现缓存机制
一个非常典型的使用场景是将代理对象用于实现缓存机制。当我们需要多次计算某个值的结果，并且这个值的计算量很大时，可以使用代理对象将结果缓存起来，供后续使用。例如：
-- -------------------- ---- -------
-------- ------------ -
-- -- --- - -- - --- -- -
------ --
-
------ ----------- - -- - ----------- - ---
-
----- -------------- - --- --------- -
---- ---------------- -------- --------- -
-- ----------------- -
----- ------ - -----------------------------
------------------- -------- ------- ----------
------ -------
-
------ ------------------- -------- ----------
-
---在这个例子中，我们创建了一个空对象 FibonacciProxy 并加入了一个 get 方法，用于计算斐波那契数列。如果代理对象存在属性名称为数字的属性，那么这段代码将计算出这个数字对应的斐波那契数，并将其保存在代理对象中，以便于后续调用。
console.log(FibonacciProxy[10]); // 输出 55 console.log(FibonacciProxy[5]); // 输出 5 console.log(FibonacciProxy[10]); // 不再计算，输出 55
总结
代理对象是一个很好的工具，在某些情况下可以为我们的代码添加更多的控制力和灵活性。它可以拦截对象属性的访问、方法的调用以及一些边缘情况的处理，在前端开发中应用广泛。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d13f248841e9894b5fba1