在 JavaScript 中，Proxy 是一个强大的对象拦截器，它能够在对象的某个操作发生时拦截并返回自定义结果。Proxy 提供了一种可以在运行时修改对象行为的方式，这在前端开发中有着广泛的应用。本文将介绍 Proxy 的常见用法，以及如何在实际开发中使用它。
1. 监听对象属性的读取和修改
在实际开发中，我们经常需要监控对象属性的读取和修改操作。例如，我们想知道某个对象的属性是否被访问过，或者想在属性被修改时做一些特定操作。这时，我们可以使用 Proxy 来监听对象属性的读取和修改。
-- -------------------- ---- -------
----- ------ - -
----- ----- -----
---- --
-
----- ------- - -
----------- ----- -
-------------------- ----------
------ -------------
--
----------- ----- ------ -
-------------------- ------- -- -----------
------------ - ------
-
-
----- ----------- - --- ------------- ---------
------------------------------ -- -------- ----- ----- ----
--------------- - --- -- -------- --- -- ---在上面的示例中，我们创建了一个对象 person 和一个 handler 对象作为 Proxy 的参数，然后使用 new Proxy() 创建了一个代理对象 proxyPerson。当我们读取 proxyPerson 的属性时，get() 方法会被触发，输出 “Getting prop”，然后返回目标对象 target 中对应的属性值。当我们修改 proxyPerson 的属性时，set() 方法会被触发，输出 “Setting prop to value”，然后将 target 中对应的属性值修改为 value。
2. 隐藏对象属性
在某些情况下，我们希望隐藏对象的一些属性，使它们在外部不可见。例如，我们可能有一个包含敏感数据的对象，不希望这些数据被外部访问。使用 Proxy 可以轻松实现这个功能。
-- -------------------- ---- -------
----- ------ - -
----- ----- -----
---- ---
--------- -------
-
----- ------- - -
----------- ----- -
-- ----- --- ----------- -
------ -----------
-
------ -------------
-
-
----- ----------- - --- ------------- ---------
------------------------------ -- ----- ----
----------------------------- -- --
---------------------------------- -- ----------在上面的示例中，我们将 get() 方法的行为修改为，当代理对象的属性为 password 时，返回字符串 "********"，而不是实际的属性值。这样一来，我们成功地隐藏了对象的敏感属性。
3. 限制对象属性的删除
有时候，我们不希望某个对象的属性被删除。使用 Proxy 可以拦截对对象属性的删除并阻止它们被执行。
-- -------------------- ---- -------
----- ------ - -
----- ----- -----
---- --
-
----- ------- - -
---------------------- ----- -
--------------------- ------- -- --- -----------
------ -----
-
-
----- ----------- - --- ------------- ---------
------ ---------------- -- --------- --- -- --- ---------
----------------------------- -- --在上面的示例中，在 deleteProperty() 方法中，我们拦截了对代理对象属性的删除，并输出了一条提示信息。然后，我们通过返回 true 告诉 JavaScript 引擎删除操作失败。这样一来，我们成功地限制了对象属性的删除。
4. 限制对象属性的添加
在某些情况下，我们希望禁止对象添加新属性。使用 Proxy 可以实现这个功能。
-- -------------------- ---- -------
----- ------ - -
----- ----- -----
---- --
-
----- ------- - -
----------- ----- ------ -
-- ----- -- ------- -
------------ - ------
- ---- -
--------------------- --- -------- ------- -- --- -----------
-
------ -----
--
---------------------- ----- -
----------------------- --- -------- ------- -- --- -----------
------ -----
-
-
----- ----------- - --- ------------- ---------
--------------- - --- -- -------- --- -- ---
------------------- - ---- ---- ---- -- ------- --- -------- ------- -- --- ---------
---------------------------------- -------- - ------ ---------- --- -- --------- --- -------- ----- -- --- ---------在上面的示例中，我们使用 set() 和 defineProperty() 方法来监听对象属性的设置和定义操作。当我们添加新属性或者定义新属性时，set() 和 defineProperty() 方法会被触发，输出对应的提示信息。然后，我们通过返回 true 来告诉 JavaScript 引擎这些操作失败。这样一来，我们成功地限制了对象属性的添加。
5. 总结
Proxy 是一种非常实用的 JavaScript 对象拦截器，在前端开发中有着广泛的应用。本文介绍了 Proxy 监听对象属性的读取和修改、隐藏对象属性、限制对象属性的删除和添加等常见用法。通过掌握这些用法，可以更好地理解 Proxy 的本质，以及如何在实际开发中灵活应用它。在开发中，我们可以根据实际需求，自定义 handler 对象，实现各种复杂的对象操作拦截效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f12f0968c7c53b0d771e4