代理对象是 ES6 新增的特性之一，它可以让我们在访问对象属性、方法等行为被拦截，从而可以对其进行特定的处理。而 ES11 中的代理对象 Proxy 则进一步加强了代理对象的功能，在许多场景下可以大大简化前端开发的难度。
Proxy 的基本语法
Proxy 是 ES11 中新增的全局类，它的基本语法如下：
const proxy = new Proxy(target, handler);
target 表示被代理的目标对象，handler 是一个对象，其中定义了代理对象的各种行为，包括属性访问、函数调用等行为的拦截器。
下面我们逐一介绍 Proxy 的各种拦截器方法。
get 拦截器
get 拦截器会拦截对代理对象属性的访问操作，我们可以在该方法中添加相应的逻辑，也可以直接返回属性的值。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
--
----- ----- - --- ------------- -
----------- --------- -
---------------------- ----------- -----------
------ -----------------
-
---
----------- -- --------- ---- --------
-- -----
---------- -- --------- --- --------
-- --在上面的代码中，我们将 person 对象代理成了 proxy，当访问代理对象的属性时，控制台会打印访问的属性名，并返回对应的属性值。
set 拦截器
set 拦截器会拦截对代理对象属性的赋值操作，我们可以在该方法中添加相应的逻辑，也可以直接对属性进行赋值。下面是一个示例代码：
-- -------------------- ---- -------
----- --- - ---
----- ----- - --- ---------- -
----------- --------- ------ -
-------------------- ----------- -------- -- -----------
---------------- - ------
-
---
---------- - ------ -- ------- ---- -------- -- ---
------------------------ -- -----在上面的代码中，我们将空对象 obj 代理成了 proxy，当对代理对象赋值时，控制台会打印赋值的属性名和值，并同时给原始对象赋值。
has 拦截器
has 拦截器会拦截 in 操作符对代理对象的操作，我们可以在该方法中添加相应的逻辑，也可以直接返回结果。下面是一个示例代码：
-- -------------------- ---- -------
----- --- - ------ -------
----- ----- - --- ---------- -
----------- --------- -
--------------------- -- ----------- -------- ---------
------ -------- -- -------
-
---
------------------ -- ------- -- -------- -- ---- -------- ------
-- ----
----------------- -- ------- -- -------- -- --- -------- ------
-- -----在上面的代码中，我们将对象 obj 代理成了 proxy，当使用 in 操作符检查属性存在时，控制台会打印检查的属性名，并返回原始对象的结果。
apply 拦截器
apply 拦截器会拦截函数调用操作，并可以在该方法中添加相应的逻辑。下面是一个示例代码：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
----- -------- - --- ---------- -
------------- -------- ----- -
-------------------- -------- ---- ---------- ----------
------ ----------------
-
---
----------------------- ---- -- ------- -------- ---- ---------- ---
-- -在上面的代码中，我们将函数 sum 代理成了 proxySum，当调用代理函数时，控制台会打印函数调用的参数，并返回原始函数的结果。
Proxy 的应用实例
防篡改对象
我们可以使用 Proxy 来构建防篡改对象，即在对象的创建后，禁止用户自行添加、删除或修改对象的属性值。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - ------ ------ ---- ----
----- ----- - --- ------------- -
----------- --------- ------ -
----- --- ------------- --- -- ------ -------- -- --------- ---------
--
---------------------- --------- -
----- --- ------------- ------ -------- -- --------- ---------
-
---
---------- - -------- -- ------ ------ --- -- ------ -------- -- --------- ------
------ ---------- -- ------ ------ ------ -------- -- --------- ------在上面的代码中，我们禁止了对 person 对象属性的修改和删除，当尝试进行这些操作时，会抛出错误信息。
记录日志
我们可以使用 Proxy 来对一些操作实现日志记录功能。下面是一个示例代码：
-- -------------------- ---- -------
----- --- - ---
----- ----- - --- ---------- -
----------- --------- ------ -
-------------------- ----------- -------- -- -----------
---------------- - ------
--
---------------------- --------- -
--------------------- ----------- -----------
------ -----------------
-
---
---------- - ------ -- ------- ---- -------- -- ---
------------------------ -- -----
------ ----------- -- -------- ---- --------在上面的代码中，我们记录了对象的属性值修改和删除操作，并在控制台输出相应的日志。
总结
Proxy 是 ES11 中新增的重要特性之一，它可以对对象的属性访问、函数调用等行为进行拦截，并添加相应的逻辑处理。在实际的前端开发中，Proxy 可以极大地简化代码的编写难度，提高代码的可读性和可维护性。希望本文对您理解 Proxy 有所帮助，也希望您在实践中能够灵活运用 Proxy 的各种拦截器方法，让代码更加优雅和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ed9dd968c7c53b010935b