前言
前端开发离不开 JavaScript，而 ECMAScript 是 JavaScript 的标准化语言规范。ECMAScript 6 中引入了 Proxy，这是一个相当强大的能力，它能够拦截 JavaScript 对象的访问、赋值、属性描述符等操作，这种所谓的“元编程”技巧为我们提供了极大的灵活性和控制力。
本篇文章将介绍如何使用 Proxy，从基本的 API 、性质等方面进行细致剖析和探讨，提供示例代码，让读者可以更加深入了解和掌握这种技巧的使用方法。
Proxy API
Proxy 是顺着原型链对属性或者方法的调用被拦截的，当使用 Proxy.new() 创建一个新的 Proxy 实例后，我们就可以使用 Proxy.revocable() 方法来创建一个具有撤销功能的代理对象。
这里有一个 Proxy 的基本结构：
const target = new Object(); const handler = new Proxy(target, handler);
Proxy(target, handler) 语法中的 handler 是一个对象，它包含了代理行为的陷阱函数。
在我们调用代理的时候，它可以拦截对象的所各种操作，最常见的是：
getPrototypeOf()参数：需要代理的目标对象，返回：对象的原型。setPrototypeOf()参数：需要代理的目标对象和原型对象，返回：是否设置成功。apply()参数：需要代理的目标对象和当前对象，返回：被调用的对象其调用结果。（比如函数）get()参数：需要代理的目标对象和属性名，返回：被代理的对象属性名的值。set()参数：需要代理的目标对象、需要设置的属性名和属性值，返回：是否设置成功。ownKeys()参数：需要代理的目标对象，返回：一个由所有自身属性名组成的数组。defineProperty()参数：需要代理的目标对象、属性名和属性描述符，返回：是否执行成功。
除此之外，还有许多拦截函数可以使用，读者可以参考文档学习使用。
Proxy 的一些性质
- 代理对象必须是 Object 类型，Array、Map 等类型的数据结构需要首先转换为 Object 才能使用代理。
- 代理行为的陷阱函数默认可以忽略任何操作，所以需要手动实现具体的操作。
- Proxy 功能受限，私有属性和 Symbol 类型的属性不受代理。
Proxy 的乐趣和技巧
拦截 API
当使用 Proxy 时，我们不仅可以拦截常规对象的访问、赋值操作，还可以拦截一些常见的 API 操作，比如：
- 拦截 Ajax 请求
- 拦截 HTTP 请求
- 拦截 WebSocket 消息
- 拦截键盘、鼠标事件
- 拦截指定流事件，如 DOMContentLoaded 等。
调试
使用 Proxy 可以很方便地调试代码，在调试时，不需要为添加监听器烦恼，我们可以使用上面列出的拦截器对代码进行分析，来观察程序的状态变化。
处理错误
除此之外，我们也可以使用 Proxy 对数据进行校验和数据访问错误处理，这意味着当我们想要执行某个方法时，会在未能执行前进行错误检查，我们可以在检查过程中实现逻辑判断并抛出异常。
示例代码
以下是一个拦截数组中的元素修改的示例代码：
-- -------------------- ---- -------
----- --- - --- -- ---
----- ------- - -
----------- -------- --------- -
-------------------- --------------
------ ------------------- -------- ----------
--
----------- -------- ------ --------- -
-------------------- --------------
------ ------------------- -------- ------ ----------
--
--
----- ----- - --- ---------- ---------
--------------- -- --- ------- --
-------- - ---- -- --- ------- --
-------- - -- -- --- ------- --总结
我们在本篇文章中，介绍了 Proxy 的 API、性质以及使用 Proxy 的乐趣和技巧，并展示了如何拦截 API、调试和处理错误的过程。读者可以参考示例代码来更深入地了解 Proxy。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d656c968c7c53b0c152dd