ECMAScript 2015 中的 Proxy API：解决对象修改问题的好工具
在前端开发中，我们经常需要对对象进行操作。然而，对象的修改可能会带来一系列的问题，如修改后导致的不可预知行为、性能问题等。为了解决这些问题，ES2015 添加了 Proxy API，这是一个非常强大的工具。
Proxy API 可以让我们拦截并修改对象的访问和操作，从而控制对象的行为。它非常灵活，可以用在各种场景中，例如数据验证、日志记录、缓存、权限控制等。
Proxy 对象是 ES2015 提供的一个新的原生 JavaScript 对象，它可以包装另一个对象并允许你定义自己的访问和操作。Proxy 对象和被包装的对象共同形成了一个代理-目标关系。
下面，我们来看几个 Proxy 的示例。
- 数据验证
我们可以使用 Proxy 来实现数据验证的功能。比如，对于一个包含用户名和密码的对象，我们可以使用 Proxy 来验证密码的长度是否符合要求。代码如下：
-- -------------------- ---- -------
----- ---- - -
--------- -------
--------- --------
--
----- --------- - --- ----------- -
----------- ----- ------ -
-- ----- --- ---------- -- ------------ - -- -
----- --- --------------- ------ ---- -- -- ----- - --------------
-
------------ - ------
------ -----
-
---
------------------ - -------- -- ------ -----在上面的代码中，我们创建了一个 user 对象，并使用 Proxy 创建了一个 userProxy 代理。然后，我们重写了 set 方法，以拦截对 password 属性的赋值操作。在该方法中，我们检查属性是否为 password，并检查密码的长度是否符合要求。如果长度不符合要求，我们将抛出一个错误。否则，我们将在目标上设置属性并返回 true。在最后一行，我们试图将 userProxy 密码设置为“12345”，由于它的长度不符合要求，所以会抛出一个错误。
- 日志记录
我们可以使用 Proxy 实现日志记录的功能。比如，对于一个 loginUser 函数，我们可以使用 Proxy 记录每次登录的时间和登录用户的信息。代码如下：
-- -------------------- ---- -------
-------- ------------------- --------- -
----------------- ------------- -- ------- --------
------ - -------- --
-
----- -------------- - --- ---------------- -
------------- -------- ----- -
------------------ ----- ----- ---------------------------
------ --------------------- -------- ------
-
---
---------------------- ----------在上面的代码中，我们创建了一个 loginUser 函数，并使用 Proxy 创建一个 loginUserProxy 代理。然后，我们重写了 apply 方法，以拦截对 loginUserProxy 函数的调用操作。在该方法中，我们记录了登录时间，并调用了 Reflect.apply 方法，在目标上调用 loginUser 函数。在最后一行，我们试图调用 loginUserProxy 函数，触发日志记录。输出结果如下：
Login time: 2022/6/16 下午1:35:24 User "john" is logging in...
- 缓存
我们可以使用 Proxy 实现缓存的功能。比如，对于一个获取用户信息的函数，我们可以使用 Proxy 缓存用户信息，避免重复执行函数。代码如下：
-- -------------------- ---- -------
-------- --------------------- -
--------------------- ---- ---- --- -------------------
------ - -------- --
-
----- ---------------- - --- ------------------ -
------------- -------- ----- -
-- ------------- -
---------- - --- ------
-
----- -------- - --------
-- -------------------------- -
----------------------- ---- ---- --- ------------- ---- -----------
------ -------------------------
-
----- ------ - --------------------- -------- ------
------------------------ --------
------ -------
-
---
------------------------- -- ------- --- --------
------------------------- -- ------- --- --------
------------------------- -- --------- ---- -----在上面的代码中，我们创建了一个 getUserInfo 函数，并使用 Proxy 创建一个 getUserInfoProxy 代理。然后，我们重写了 apply 方法，以拦截对 getUserInfoProxy 函数的调用操作。在该方法中，我们检查是否存在缓存，如果不存在，则初始化一个 Map 数据结构。然后，我们检查是否已经存在该用户信息的缓存，如果存在，则直接从缓存中读取。否则，我们使用 Reflect.apply 方法，在目标上调用 getUserInfo 函数，并将结果缓存到 Map 中。在最后三行，我们试图三次调用 getUserInfoProxy 函数，并测试它的缓存效果，输出结果如下：
Fetching user info for "john"... Fetching user info for "jane"... Retrieving user info for "john" from cache...
- 权限控制
我们可以使用 Proxy 实现权限控制的功能。比如，对于一个包含敏感信息的对象，我们可以使用 Proxy 限制对该对象的访问。代码如下：
-- -------------------- ---- -------
----- ------------- - -
----- -------
---- ---
--- ------
--
----- ------------------ - --- -------------------- -
----------- ----- --------- -
-- ----- --- ----- -
----- --- ------------- ----------
-
------ ------------------- ----- ----------
-
---
------------------------------------- -- ------
------------------------------------ -- --
----------------------------------- -- ------ -----在上面的代码中，我们创建了一个 sensitiveData 对象，并使用 Proxy 创建一个 sensitiveDataProxy 代理。然后，我们重写了 get 方法，以拦截对 sensitiveDataProxy 对象属性的访问操作。在该方法中，我们检查是否为敏感信息属性，如果是，则抛出一个错误。否则，我们调用 Reflect.get 方法，在目标上获取属性值。在最后三行，我们试图访问 sensitiveDataProxy 对象的三个属性，并测试它的权限控制效果，输出结果如下：
john 20 Access denied!
总结
Proxy API 是 ES2015 中的一项非常强大的工具，可以用于解决对象修改问题，如数据验证、日志记录、缓存、权限控制等。它非常灵活，可以用在各种场景中，并且可以高度定制化。通过学习 Proxy API，我们可以更好地控制和管理对象，提高代码的可维护性、可扩展性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b1256448841e9894d7b61d