什么是 Proxy
Proxy 是 ES6 中新增的一个对象，它可以拦截并改变 JavaScript 对象的默认行为。Proxy 是一种元编程（meta programming）机制，它允许我们在对象的基础上定义自己的操作，例如属性访问、赋值、函数调用等。
Proxy 的基本用法
Proxy 的基本用法如下所示：
const target = {}; // 目标对象
const handler = {}; // 处理器对象
const proxy = new Proxy(target, handler); // 创建代理对象其中，target 是需要代理的目标对象，handler 是一个对象，它定义了拦截目标对象的行为，例如访问、赋值、函数调用等。
下面我们来看一些常见的拦截操作：
get
get 拦截器用于拦截对目标对象属性的访问，它接受三个参数：
target：目标对象。property：属性名。receiver：最初被调用的对象。
-- -------------------- ---- -------
----- ------ - -
----- -----
--
----- ------- - -
----------- --------- --------- -
---------------- --------------
------ -----------------
-
--
----- ----- - --- ------------- ---------
------------------------ -- --- ---- ---set
set 拦截器用于拦截对目标对象属性的赋值操作，它接受三个参数：
target：目标对象。property：属性名。value：属性值。receiver：最初被调用的对象。
-- -------------------- ---- -------
----- ------ - ---
----- ------- - -
----------- --------- ------ --------- -
---------------- -----------------------
---------------- - ------
------ -----
-
--
----- ----- - --- ------------- ---------
---------- - ------ -- --- --------apply
apply 拦截器用于拦截对目标对象函数的调用，它接受三个参数：
target：目标对象。thisArg：函数调用时的this对象。argumentsList：函数调用时的参数列表。
-- -------------------- ---- -------
----- ------ - -
------ -- -
------ - - --
-
--
----- ------- - -
------------- -------- -------------- -
----------------- -------- ------------------------
------ --------------------- ---------------
-
--
----- ----- - --- ------------- ---------
------------------------ ---- -- ---- -------- -------- -Proxy 的常见使用场景
数据校验
我们可以使用 Proxy 来对对象进行数据校验，例如对一个对象的年龄属性进行限制，年龄必须是正整数。
-- -------------------- ---- -------
----- ------ - -
---- --
--
----- ------- - -
----------- --------- ------ --------- -
-- --------- --- ----- -- ------------------------- -
----- --- -------------- ---- -- -- ----------
-
---------------- - ------
------ -----
-
--
----- ----- - --- ------------- ---------
--------- - --- -- ----
--------- - ----- -- -- ---------- --- ---- -- -- -------数据缓存
我们可以使用 Proxy 来实现一个简单的数据缓存，例如对一个函数的结果进行缓存，当下一次调用函数时，如果参数相同，则直接返回缓存的结果。
-- -------------------- ---- -------
-------- ------------ -
-- -- - -- -
------ --
-
------ ----------- - -- - ----------- - ---
-
----- ----- - --- ------
----- ------- - -
------------- -------- -------------- -
----- --- - -----------------
-- ---------------- -
---------------- ----------------
------ ---------------
-
----- ------ - --------------------- ---------------
---------------- ----------------
-------------- --------
------ -------
-
--
----- ----- - --- ---------------- ---------
----------------------- -- --
----------------------- -- --- --------- --对象深度监听
我们可以使用 Proxy 来实现对象的深度监听，例如监听一个对象的所有属性变化。
-- -------------------- ---- -------
-------- ------------ --------- -
----- ------- - -
----------- --------- --------- -
----- ----- - ------------------- --------- ----------
-- ------- ----- --- -------- -- ----- --- ----- -
------ --- ------------ ---------
-
------ ------
--
----------- --------- ------ --------- -
----- -------- - ------------------- --------- ----------
----- ------ - ------------------- --------- ------ ----------
-- --------- --- ------ -
------------------ ------ ----------
-
------ -------
-
--
------ --- ---------- ---------
-
----- ---- - -
----- ------
---- ---
-------- -
----- ----------
------- ----------
-
--
----- ----- - ------------- ---------- ------ --------- -- -
--------------------- ----------- ------- ---- ----------- -- -----------
---
---------- - -------- -- -------- ---- ------- ---- --- -- -----
--------- - --- -- -------- --- ------- ---- -- -- --
------------------ - ----------- -- -------- ---- ------- ---- ------- -- --------总结
Proxy 是 ES6 中新增的一个对象，它可以拦截并改变 JavaScript 对象的默认行为。Proxy 可以用于数据校验、数据缓存、对象深度监听等场景。在使用 Proxy 时，需要注意拦截行为的实现，以及拦截器函数的参数和返回值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513ca1b95b1f8cacdc39ba5