在 ECMAScript 2016（即 ES7）中，新增了一个非常强大的 API，即 Proxy。这个 API 可以让我们在运行时拦截并自定义某些操作，对于前端开发来说非常有用，可以帮助我们更加灵活地操作对象和数组。
Proxy 的基本用法
在使用 Proxy 时，需要创建一个 Proxy 对象，并传入一个 target 对象和一个 handler 对象。target 对象即为被代理的对象，而 handler 对象定义了拦截 target 对象的各种操作。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
-
----- ------- - -
----------- --------- -
-- --------- --- ------ -
------ ---------------- - --
- ---- -
------ ----------------
-
--
----------- --------- ------ -
-- --------- --- ----- -- ------ ----- --- --------- -
----- --- ---------- ---- -- - --------
-
---------------- - -----
------ ----
-
-
----- ----- - --- ------------- --------
----------------------- -- ---
---------------------- -- --
--------- - ---- -- ------ --- ---- -- - ------在这个例子中，我们拦截了 target 对象的 get 和 set 操作，实现了对 age 属性的加 10 和类型检查。
Proxy 的深层代理
在实际开发中，经常需要对复杂对象进行深层代理。对于这种情况，Proxy 也提供了相应的处理方式。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
---- -
------ --------- -----------
------- ----
-
-
----- ------- - -
----------- --------- --------- -
-- ------- ---------------- --- -------- -- ---------------- --- ----- -
------ --- ----------------------- --------
- ---- -
------ ----------------
-
--
----------- --------- ------ -
---------------- - -----
------ ----
-
-
----- ----- - --- ------------- --------
---------------------------- -- -------- ---------
----------------------------- -- ----
--------------- - -------- ----------
---------------------------- -- ------- ---------在这个例子中，我们利用 Proxy 的递归处理方式，实现了对 job 对象的深层代理。
Proxy 的应用场景
Proxy 的应用场景非常广泛，其中比较常见的场景有：
- 数据劫持：通过拦截对象的 set 操作，实现对某些数据的监听和拦截。
- 权限控制：通过拦截对象的 get 操作，实现对某些属性的保护和限制访问。
- 性能优化：通过拦截对象的某些操作，实现对某些计算的缓存和优化。
总结
ES7 中新增的 Proxy() API，为前端开发提供了一种非常方便、灵活的对象代理方式。熟练掌握 Proxy 的用法，对于我们在实际开发中进行对象操作和数据监听等方面都有非常大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476ddc2968c7c53b0379797