什么是 Proxy 代理？
Proxy 是 ES6 中新增的一个操作对象的 API，它允许你创建一个代理对象，用于控制对另一个对象的访问。Proxy 对象可以拦截并重定义 JavaScript 的一些底层操作，比如属性访问、赋值、函数调用等等。
如何使用 Proxy 代理？
首先，我们需要创建一个 Proxy 对象，Proxy 构造函数接受两个参数：
- 被代理的对象（target）
- 一个处理程序对象（handler）
const target = {};
const handler = {};
const proxy = new Proxy(target, handler);当我们对代理对象进行操作时，处理程序对象中对应的方法会被调用，从而实现对原对象的拦截和重定义。
Proxy 的处理程序对象
处理程序对象是 Proxy 的核心，它定义了拦截器函数，用于拦截对代理对象的各种操作。处理程序对象可以定义以下拦截器函数：
get(target, property, receiver)：拦截对目标对象属性的读取操作。set(target, property, value, receiver)：拦截对目标对象属性的赋值操作。has(target, property)：拦截in操作符。apply(target, thisArg, argumentsList)：拦截函数的调用操作。construct(target, argumentsList, newTarget)：拦截new操作符。
以下是一个简单的示例：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
--
----- ------- - -
----------- --------- --------- -
-------------------- --------------
------ ------------------- --------- ----------
--
----------- --------- ------ --------- -
-------------------- ----------- -- -----------
------ ------------------- --------- ------ ----------
-
--
----- ----- - --- ------------- ---------
------------------------ -- ------- ---- ---
--------- - --- -- ------- --- -- --在上面的示例中，我们定义了一个处理程序对象，其中 get 和 set 方法分别用于拦截对目标对象属性的读取和赋值操作。当我们读取代理对象的属性时，get 方法会被调用，并输出相应的日志信息。同样地，当我们对代理对象进行赋值操作时，set 方法会被调用，并输出相应的日志信息。
Proxy 的应用场景
1. 数据验证
Proxy 可以用于数据验证，我们可以在 set 方法中编写一些验证逻辑，从而确保数据的正确性。
-- -------------------- ---- -------
----- ------ - -
----- ---
---- -
--
----- ------- - -
----------- --------- ------ --------- -
-- --------- --- ----- -- ------ ----- --- --------- -
----- --- -------------- ---- -- - ---------
-
-- --------- --- ------ -- ------ ----- --- --------- -
----- --- --------------- ---- -- - ---------
-
------ ------------------- --------- ------ ----------
-
--
----- ----- - --- ------------- ---------
---------- - ------
--------- - ---
------------------- -- - ----- ------ ---- -- -
---------- - ---- -- ---------- ---- ---- -- - ------
--------- - ----- -- ---------- --- ---- -- - ------在上面的示例中，我们定义了一个 person 对象，其中包含了 name 和 age 两个属性。然后我们创建了一个代理对象 proxy，并在 set 方法中编写了一些验证逻辑。当我们对代理对象进行赋值操作时，验证逻辑会被触发，并抛出相应的错误信息。
2. 数据劫持
Proxy 可以用于数据劫持，我们可以在 get 和 set 方法中对数据进行操作，从而实现数据的双向绑定。
-- -------------------- ---- -------
----- ------ - -
----- ---
---- -
--
----- --------- - --------------------------------------
----- -------- - -------------------------------------
----- -------- - -------------------------------------
----- ------- - ------------------------------------
----- ------- - -
----------- --------- ------ --------- -
------------------- --------- ------ ----------
---------
------ -----
-
--
----- ----- - --- ------------- ---------
----------------------------------- - -- -
---------- - ---------------
---
---------------------------------- - -- -
--------- - ---------------
---
-------- -------- -
------------------ - -----------
----------------- - ----------
-在上面的示例中，我们定义了一个 person 对象，其中包含了 name 和 age 两个属性。然后我们创建了一个代理对象 proxy，并在 set 方法中对数据进行了操作。当我们在输入框中输入数据时，代理对象的属性会被更新，并触发 set 方法中的渲染函数 render，从而实现了数据的双向绑定。
总结
Proxy 是 ES6 中新增的一个操作对象的 API，它允许你创建一个代理对象，用于控制对另一个对象的访问。Proxy 对象可以拦截并重定义 JavaScript 的一些底层操作，比如属性访问、赋值、函数调用等等。在实际开发中，Proxy 可以用于数据验证、数据劫持等场景，从而提高代码的可维护性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650dcf6a95b1f8cacd74f770