在 ECMAScript 2018 中，新增了一种对象属性： Proxy，这种属性可以帮助我们更好地管理对象数据，从而提升代码的可读性和可维护性。
什么是 Proxy？
Proxy 是一种新的对象属性，它可以用来拦截对象方法和属性的访问，从而实现对对象数据的管理和控制。
Proxy 主要由两个部分组成：目标对象和处理器对象。目标对象是我们要拦截的对象，而处理器对象则提供了一系列的拦截方法，用来管理和控制我们需要拦截的对象。
Proxy 的使用方法
要使用 Proxy，需要传入两个参数：目标对象和处理器对象。下面是一个简单的示例，使用 Proxy 来拦截对象属性的读取和写入：
--- --- - -
----- ------
---- --
--
--- ------- - -
----------- ----- -
------------------- ------- -----------
------ -------------
--
----------- ----- ------ -
---------------- ------- -------- -- -----------
------------ - ------
-
--
--- ----- - --- ---------- ---------
------------------------ -- ------ ---- -------- ---
--------- - --- -- --- --- -------- -- --在上面的示例中，我们定义了一个对象 obj 和一个处理器对象 handler。处理器对象中定义了两个方法：get 和 set，用来拦截对象属性的读取和写入操作。
然后我们创建了一个 Proxy 对象 proxy，同时将 obj 和 handler 传入 Proxy 的构造函数中。最后我们测试了一下 proxy 对象的读写操作，发现它们都被拦截了，并打印了相应的日志。
Proxy 的拦截方法
除了上面的 get 和 set 方法之外，Proxy 还提供了一系列其他的拦截方法，用来处理不同的对象操作。下面是全部的拦截方法列表：
- get(target, prop, receiver): 拦截对象属性的读取操作
- set(target, prop, value, receiver): 拦截对象属性的写入操作
- has(target, prop): 拦截 in 操作符的实现
- deleteProperty(target, prop): 拦截 delete 操作符的实现
- ownKeys(target): 拦截 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys() 和 for...in 循环中获取对象属性的操作
- getOwnPropertyDescriptor(target, prop): 拦截 Object.getOwnPropertyDescriptor() 操作的实现
- defineProperty(target, prop, descriptor): 拦截 Object.defineProperty()、Object.defineProperties() 和 Object.create() 操作的实现
- preventExtensions(target): 拦截 Object.preventExtensions() 操作的实现
- isExtensible(target): 拦截 Object.isExtensible() 操作的实现
- apply(target, thisArg, args): 拦截函数的调用操作
- construct(target, args): 拦截 new 操作符的实现
Proxy 的应用场景
Proxy 可以用于很多的应用场景，比如对象监控、数据验证、数据绑定等等。下面有一个例子，使用 Proxy 和 Reflect 实现一个数据验证器：
--- --------- - -
------------ -
------ -----------------------------------------------
--
---------- -
------ ------ ----- --- -------- -- ----- -- -- -- ----- -- ----
-
--
--- ------- - -
----------- ----- ------ -
--- ---------- - ----------------
-- ----------- -- ------------------- -
----- --- -------------- ------- ------ -----------
-
------ ------------------- ----- -------
-
--
--- ---- - --- --------- ---------
---------- - ------------------
------------------------ -- ---------------
-------- - --- -- ------------ --- ------ --在上面的示例中，我们定义了一个 validator 对象，它包含了各种数据验证的方法。然后我们创建了一个处理器对象 handler，拦截了 data 对象的写入操作。
在处理器对象中，我们首先判断写入的属性是否需要验证，如果需要，则调用相应的验证方法。如果验证失败，则抛出一个异常。如果验证通过，则使用 Reflect.set 方法，将属性值写入对象中。
最后我们使用 Proxy 创建了一个 data 对象，测试了一下数据验证的功能，如果写入的属性不符合要求，则会抛出相应的异常。
总结
Proxy 是 ECMAScript 2018 增加的一种对象属性，可以拦截对象的方法和属性访问，从而实现对对象数据的管理和控制。Proxy 提升了代码的可读性和可维护性，拥有广泛的应用场景，可以用于对象监控、数据验证、数据绑定等等。
如果你想更好地管理对象数据，优化代码结构，提高工作效率，那么一定要学习并掌握 Proxy 这一新特性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e6691bf6b2d6eab31d2a51