在前端开发中，我们把代码组织成对象来提高代码的可读性和可维护性。但是，对象可能会被非授权者访问和修改。为了保障我们的数据和代码安全，我们需要使用一些手段实现对象的访问控制和保护。在 ES6 中，新增了一个 Proxy 对象，可以帮助我们解决这些问题。
Proxy 对象简介
Proxy 对象是 ES6 中新增的一个特性，它允许我们拦截并重新定义对象的行为。通过 Proxy 对象，我们可以控制对象的读写、属性的访问、方法的调用等。Proxy 对象提供了一个机制，可以在目标对象的基础上添加一层代理层，来捕获并拦截目标对象上的操作。我们可以认为 Proxy 对象是一个中介，它通过代理来管理目标对象的访问。
Proxy 对象的基本用法如下：
----- ------ - --- -- ---- ----- ------- - --- -- ----- ----- ----- - --- ------------- ---------- -- -- ----- --
在上面的代码中，target 代表目标对象，handler 代表处理器对象，我们将目标对象和处理器对象传给 Proxy 构造函数，从而创建一个 Proxy 对象。
Proxy 对象代理方式
在创建 Proxy 对象时，我们可以通过定义 handlers 对象来指定代理的方式。handlers 对象是一个集合，其属性名对应着被代理对象上的操作名（如 set、get、apply 等），属性值为相应的处理函数。当代理对象上有对应操作被触发时，代理对象就会调用相关的处理函数。
Proxy 对象示例
下面，我们来看一个具体的例子。假设我们有一个名为 user 的对象，它包含了用户的姓名和年龄。为了保护用户的信息，我们要求只有当用户的年龄大于等于 18 岁时，才能访问和修改用户的信息。我们可以通过 Proxy 对象来实现这些功能：
----- ---- - - ----- ------- ---- -- --
----- -------- - -
---- ---------------- --------- -
-- --------- --- ----- -- ---------------- - --- -
---------------- --- --- ------- -- --- --- ------
------ ----------
-
------ -----------------
--
---- ---------------- --------- ------ -
-- --------- --- ----- -- ----- - --- -
---------------- --- --- ------- -- ------ --- ------
------ ------
-
---------------- - ------
------ -----
-
--
----- ----- - --- ----------- ----------
------------------------ -- ----
----------------------- -- ---------
--------- - ---
----------------------- -- --
--------- - ---
----------------------- -- --在上面的代码中，我们定义了一个名为 handlers 的对象，它包含了两个方法 get 和 set，用于拦截读取和修改操作。在 get 方法中，我们检查了用户的年龄是否大于等于 18 岁，如果不是，则返回 undefined。在 set 方法中，我们检查了要修改的用户年龄是否大于等于 18 岁，如果不是，则返回 false，阻止修改操作。在代理对象上进行读写操作时，代理对象会自动调用对应的处理方法，从而实现了访问控制的功能。
总结
通过 Proxy 对象，我们可以对 JavaScript 对象进行访问控制和保护，从而提高我们的代码安全性。在使用时，我们要通过定义 handlers 对象来指定代理的方式，以达到我们需要的效果。需要注意的是，使用 Proxy 对象并不是完全保证数据的安全，只能提高代码的安全性。同时，使用 Proxy 对象的效率也是要考虑的，如果代理对象操作过于频繁，可能会影响程序的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654af7777d4982a6eb4eba2a