在前端开发中，我们经常需要使用代理来拦截和处理某些操作。ES12 中新增了全局代理，让我们可以更加方便地实现代理功能。本文将介绍 ES12 中全局代理的相关知识，包括代理接口、getters 和 setters，同时也会提供一些示例代码以帮助读者更好地理解。
代理接口
ES12 中的全局代理使用 Proxy 对象实现，Proxy 对象是一个构造函数，用于创建代理对象。代理对象可以拦截并处理目标对象的操作，比如访问、赋值、删除等等。代理对象的基本语法如下：
--- ----- - --- ------------- ---------
其中，target 表示要代理的目标对象，handler 则是一个对象，用于定义拦截目标对象操作的方法。handler 对象可以包含以下方法：
- get：拦截读取操作。
- set：拦截赋值操作。
- deleteProperty：拦截删除属性操作。
- apply：拦截函数调用操作。
- construct：拦截使用 new 关键字创建对象的操作。
下面我们来看一些具体的例子。
代理对象的基本使用
首先，我们来看一下最基本的代理对象使用方法。下面的代码创建了一个代理对象，用于拦截目标对象的读取操作：
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- --------- -
---------------- ---------
------ ------------
-
--
--- ----- - --- ------------- ---------
------------------------ -- ------ ---- -----
----------------------- -- ------ --- --在上面的代码中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后，我们创建了一个 handler 对象，并定义了一个 get 方法，用于拦截读取操作。最后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
在代理对象 proxy 中，我们使用了代理对象的属性 name 和 age，这时就会触发 get 方法的拦截操作。在 get 方法中，我们输出了被拦截的属性名 key，并返回了对应的属性值。
拦截赋值操作
除了读取操作，我们还可以拦截赋值操作。下面的代码创建了一个代理对象，用于拦截目标对象的赋值操作：
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- ------ --------- -
---------------- ------------------
----------- - ------
------ -----
-
--
--- ----- - --- ------------- ---------
---------- - ------ -- ------ --------
--------- - --- -- ------ ------在上面的代码中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后，我们创建了一个 handler 对象，并定义了一个 set 方法，用于拦截赋值操作。最后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
在代理对象 proxy 中，我们使用了代理对象的属性 name 和 age，并对它们进行了赋值操作。这时就会触发 set 方法的拦截操作。在 set 方法中，我们输出了被拦截的属性名 key 和赋值的属性值 value，并将目标对象 target 的对应属性赋值为 value。
需要注意的是，set 方法必须返回 true 或 false，表示赋值操作是否成功。如果返回 false，赋值操作就会抛出一个 TypeError。
拦截删除属性操作
除了读取和赋值操作，我们还可以拦截删除属性操作。下面的代码创建了一个代理对象，用于拦截目标对象的删除属性操作：
--- ------ - -
----- --------
---- --
--
--- ------- - -
---------------------- ---- -
------------------- ---------
------ ------------
------ -----
-
--
--- ----- - --- ------------- ---------
------ ---------- -- --------- ---
----------------------- -- ------------在上面的代码中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后，我们创建了一个 handler 对象，并定义了一个 deleteProperty 方法，用于拦截删除属性操作。最后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
在代理对象 proxy 中，我们使用了代理对象的属性 age，并对它进行了删除操作。这时就会触发 deleteProperty 方法的拦截操作。在 deleteProperty 方法中，我们输出了被拦截的属性名 key，并删除了目标对象 target 的对应属性。
需要注意的是，deleteProperty 方法必须返回 true 或 false，表示删除操作是否成功。如果返回 false，删除操作就会抛出一个 TypeError。
getters 和 setters
除了基本的拦截操作，ES12 中的全局代理还支持 getters 和 setters。getters 和 setters 是一种属性访问器，用于设置和获取对象的属性值。通过使用 getters 和 setters，我们可以更加灵活地处理对象属性的访问。
使用 getters
下面的代码创建了一个代理对象，用于拦截目标对象的读取操作，并使用 getters 对目标对象的属性进行访问：
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- --------- -
---------------- ---------
------ ------------
-
--
--- ----- - --- ------------- ---------
------------------------ -- ------ ---- -----
----------------------- -- ------ --- --在上面的代码中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后，我们创建了一个 handler 对象，并定义了一个 get 方法，用于拦截读取操作。最后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
在代理对象 proxy 中，我们使用了代理对象的属性 name 和 age，这时就会触发 get 方法的拦截操作。在 get 方法中，我们输出了被拦截的属性名 key，并返回了对应的属性值。
使用 setters
除了使用 getters，我们还可以使用 setters 来对对象属性进行设置。下面的代码创建了一个代理对象，用于拦截目标对象的赋值操作，并使用 setters 对目标对象的属性进行设置：
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- ------ --------- -
---------------- ------------------
----------- - ------
------ -----
-
--
--- ----- - --- ------------- ---------
---------- - ------ -- ------ --------
--------- - --- -- ------ ------在上面的代码中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后，我们创建了一个 handler 对象，并定义了一个 set 方法，用于拦截赋值操作。最后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 target 和 handler 作为参数传入。
在代理对象 proxy 中，我们使用了代理对象的属性 name 和 age，并对它们进行了赋值操作。这时就会触发 set 方法的拦截操作。在 set 方法中，我们输出了被拦截的属性名 key 和赋值的属性值 value，并将目标对象 target 的对应属性赋值为 value。
需要注意的是，set 方法必须返回 true 或 false，表示赋值操作是否成功。如果返回 false，赋值操作就会抛出一个 TypeError。
总结
本文介绍了 ES12 中的全局代理，包括代理接口、getters 和 setters。通过使用全局代理，我们可以更加方便地实现代理功能，并灵活地处理对象属性的访问。希望本文能对读者了解和使用全局代理有所帮助。
示例代码
下面是本文中提到的示例代码：
-- ---------
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- --------- -
---------------- ---------
------ ------------
--
----------- ---- ------ --------- -
---------------- ------------------
----------- - ------
------ -----
--
---------------------- ---- -
------------------- ---------
------ ------------
------ -----
-
--
--- ----- - --- ------------- ---------
------------------------ -- ------ ---- -----
----------------------- -- ------ --- --
---------- - ------ -- ------ --------
--------- - --- -- ------ ------
------ ---------- -- --------- ---
----------------------- -- -------------- -- ------- - -------
--- ------ - -
----- --------
---- --
--
--- ------- - -
----------- ---- --------- -
---------------- ---------
------ ------------
--
----------- ---- ------ --------- -
---------------- ------------------
----------- - ------
------ -----
-
--
--- ----- - --- ------------- ---------
------------------------ -- ------ ---- -----
----------------------- -- ------ --- --
---------- - ------ -- ------ --------
--------- - --- -- ------ ------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660e1579d10417a222e83840