在 ECMAScript 2017 中，引入了 Proxy 对象来对 JavaScript 中的对象进行动态代理。它提供了对对象属性的访问、赋值、枚举和函数调用的拦截和处理，使得我们可以对对象做更多的操作，并可以对对象进行更细粒度的控制。
什么是 Proxy 对象？
Proxy 是一个在语言层面上的拦截器，可以侦听并拦截目标对象上的各种操作，并且可以自定义处理程序来修改和控制这些操作的行为。Proxy 对象基本上是一个作为另一个对象的前端和拦截器的对象，可以把 Proxy 视作目标对象的代理对象。
在创建一个 Proxy 对象时，需要提供两个参数，一个是目标对象，即需要代理的对象，另一个是句柄（handler），即用来处理拦截器的操作的对象。
-- -------------------- ---- -------
--- ------ - - ----- ------- ---- -- --
--- ------- - -
---- -------- -------- --------- -
-------------------- --------------
------ -----------------
--
---- -------- -------- --------- ------ -
-------------------- ----------- -- -----------
---------------- - ------
--
--
--- ----- - --- ------------- ---------
----------- -- ------- ----
---------- -- ------- ---
---------- - ------- -- ------- ---- -- ----我们可以看到，在上面的代码中，我们通过使用 Proxy 来代理 target 对象并定义了一个句柄对象 handler，通过设置 get 和 set 函数来处理拦截器的操作。在使用 proxy 对象时，如果读取 proxy 对象的属性，就会调用 get 函数，如果设置 proxy 对象的属性，就会调用 set 函数。
Proxy 的拦截器
get 拦截器
get 拦截器用于拦截对象的属性读取操作，它会接收两个参数：目标对象和要访问的属性名。如果该属性存在于目标对象中，那么该拦截器就会执行相应的操作。如果该属性不存在于目标对象中，那么该拦截器就会返回 undefined。
-- -------------------- ---- -------
--- ------ - - ----- ------ ---- -- --
--- ------- - -
---- -------- -------- --------- -
-------------------- --------------
------ -----------------
--
--
--- ----- - --- ------------- ---------
------------------------ -- ------- ---- ---
----------------------- -- ------- --- --set 拦截器
set 拦截器用于拦截对象的属性设置操作。
-- -------------------- ---- -------
--- ------ - - ----- ------ ---- -- --
--- ------- - -
---- -------- -------- --------- ------ -
-------------------- ----------- -- -----------
---------------- - ------
--
--
--- ----- - --- ------------- ---------
---------- - ------ -- ------- ---- -- ---apply 拦截器
apply 拦截器用于拦截函数的调用操作。
-- -------------------- ---- -------
--- --- - -------- --- -- -
------ - - --
--
--- ------- - -
------ -------- -------- -------- -------------- -
-------------------- -------------- ---- ---------- -------------------
------ --------------------- ---------------
--
--
--- ----- - --- ---------- ---------
-------- --- -- ------- --- ---- ---------- ---Proxy 的应用场景
Proxy 对象的应用场景非常广泛，比如：
数据校验和数据双向绑定
我们可以通过定义 set 和 get 拦截器来对数据进行校验和双向绑定，从而使代码更加健壮：
-- -------------------- ---- -------
--- ---- - - ----- ------ ---- -- --
--- ------- - -
---- -------- -------- --------- ------ -
-- --------- --- ----- -- ----- - -- -
---------------- --- --- -- -----------
-------
-
-------------------- ----------- -- -----------
---------------- - ------
--
---- -------- -------- --------- -
-------------------- --------------
------ -----------------
--
--
--- ----- - --- ----------- ---------
--------- - --- -- --- --- --- -- --------
----------------------- -- ------- --- --对象缓存
我们可以通过使用 Proxy 对象来实现一个对象缓存，从而避免重复创建对象，提高程序的性能：
-- -------------------- ---- -------
--- ----- - --- ------
--- ------ - ---
--- ------- - -
---- -------- -------- --------- -
-------------------- --------------
------ -----------------
--
---- -------- -------- --------- ------ -
-------------------- ----------- -- -----------
---------------- - ------
----------------- -------
--
--
--- ----- - --- ------------- ---------
---------- - ------
------------------------------- -- - ----- ----- -
--------- - ---
------------------------------- -- - ----- ------ ---- -- -更好地封装对象
我们可以通过使用 Proxy 对象来封装一个对象，从而使得该对象只能通过指定的方法来修改，从而保证了该对象的安全性：
-- -------------------- ---- -------
--- ------ - - ----- ------ ---- -- --
--- ------- - -
---- -------- -------- --------- ------ -
----- --- ------------- ------ --- ------ ---------
--
--
--- ----- - --- ------------- ---------
-------- -------------- ---- -
------- - ----
-
---------------- ---- -- ------ ------ ------ --- ------ ------
----------------------- -- --总结
Proxy 对象为 JavaScript 中的对象提供了动态代理机制，它允许我们通过设置拦截器来对对象的操作进行处理，从而使得我们可以对对象进行更细粒度的控制。在实际项目中，我们可以通过使用 Proxy 对象来实现数据校验、对象缓存、更好地封装对象等功能，从而提高程序的健壮性、性能和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a768ba48841e98943e69ae