什么是 Proxy
Proxy 是 ES6 中引入的一个新特性，它可以拦截并重定义对象的基本操作，例如读取、写入和删除属性等。在 ES12 中，Proxy 更加强大，它可以拦截更多操作，例如函数调用和构造函数调用等。
Proxy 的应用
1. 数据校验
在前端开发中，数据校验是非常常见的需求。使用 Proxy 可以方便地实现数据校验的功能。例如下面的代码：
-- -------------------- ---- -------
----- --------- - -
----------- ---- ------ -
-- ---- --- ----- -- ------ ----- --- --------- -
----- --- -------------- ---- -- - ---------
-
----------- - ------
------ -----
-
--
----- ------ - --- --------- -----------
---------- - --- -- ----
---------- - ----- -- ------ ---- -- - ------在上面的代码中，我们定义了一个 validator 对象，它是一个 Proxy 对象。当我们设置 person 对象的 age 属性时，会触发 validator 对象的 set 方法。在 set 方法中，我们判断了如果 key 为 age 且 value 不是一个数字，就会抛出一个类型错误。如果设置正常，我们就将属性值设置到 target 对象中。
2. 对象代理
在前端开发中，我们经常需要将一个对象的属性映射到另一个对象的属性上。使用 Proxy 可以方便地实现对象代理的功能。例如下面的代码：
-- -------------------- ---- -------
----- ---- - - ----- ------ ---- -- --
----- ---- - --- --------- -
----------- ---- -
------ ----------
--
----------- ---- ------ -
--------- - ------
------ -----
-
---
----------------------- -- ---
---------------------- -- --
-------- - ---
---------------------- -- --在上面的代码中，我们定义了两个对象 obj1 和 obj2。当我们访问 obj2 的属性时，会触发 obj2 对象的 get 方法，该方法会返回 obj1 对象的对应属性的值。当我们设置 obj2 的属性时，会触发 obj2 对象的 set 方法，该方法会将属性值设置到 obj1 对象中。
3. 函数代理
在前端开发中，我们经常需要对函数的返回值进行处理。使用 Proxy 可以方便地实现函数代理的功能。例如下面的代码：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
----- -------- - --- ---------- -
------------- -------- ----- -
----- ------ - --------------------- ------
------ ------ - --
-
---
----------------------- ---- -- -在上面的代码中，我们定义了一个 add 函数和一个 proxyAdd 对象。当我们调用 proxyAdd 函数时，会触发 proxyAdd 对象的 apply 方法，该方法会调用原始的 add 函数，并将返回值乘以 2。
常见错误解决方案
1. TypeError: 'set' on proxy: trap returned falsish for property
当我们在 Proxy 对象的 set 方法中返回 false 或 undefined 时，会触发该错误。该错误通常是由于我们在 set 方法中没有正确地返回 true，导致操作未被成功执行。例如下面的代码：
-- -------------------- ---- -------
----- --- - --- --------- -
----------- ---- ------ -
-- ------- ----- --- --------- -
------ ------ -- ------
-
----------- - ------
-
---
------- - --- -- ----
------- - ----- -- ------------- ----- -- ------ ---- -------- ------- --- -------- -----在上面的代码中，我们在 set 方法中使用了错误的返回值。当我们设置 obj 对象的 age 属性时，如果属性值不是一个数字，就会触发该错误。为了解决该错误，我们需要在 set 方法中正确地返回 true。
2. TypeError: 'apply' on proxy: trap returned falsish for property
当我们在 Proxy 对象的 apply 方法中返回 false 或 undefined 时，会触发该错误。该错误通常是由于我们在 apply 方法中没有正确地返回函数的返回值，导致操作未被成功执行。例如下面的代码：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
----- -------- - --- ---------- -
------------- -------- ----- -
-- -------------- -- ------ --- --- ---------- -
------ ------ -- ------
-
----- ------ - --------------------- ------
------ ------ - --
-
---
----------------------- ---- -- -
----------------------- ------ -- ------------- ------- -- ------ ---- -------- ------- --- -------- -------在上面的代码中，我们在 apply 方法中使用了错误的返回值。当我们调用 proxyAdd 函数时，如果函数的参数中有一个不是数字，就会触发该错误。为了解决该错误，我们需要在 apply 方法中正确地返回函数的返回值。
总结
Proxy 是一个非常强大的特性，它可以拦截并重定义对象的基本操作，例如读取、写入和删除属性等。在 ES12 中，Proxy 更加强大，它可以拦截更多操作，例如函数调用和构造函数调用等。在前端开发中，我们可以使用 Proxy 实现数据校验、对象代理和函数代理等功能。在使用 Proxy 时，我们需要注意常见的错误，例如 'set' on proxy: trap returned falsish for property 和 'apply' on proxy: trap returned falsish for property 等，需要及时解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656f15ecd2f5e1655d76eb66