在前端开发中，我们经常需要对对象进行各种操作，如读取、修改、删除属性等，ES6 为我们提供了 Proxy 对象，它能够代理目标对象并对其进行额外的捕获与控制，使开发者可以在对象操作时追踪修改对象上的属性和方法，从而增加对数据的透明度，并减少代码的复杂度。
本文将深入解析 ES12 的 Proxy 对象的使用方法和技巧，以及 Proxy 对象的常见应用场景。
Proxy 对象的基本用法
Proxy 对象可以代理一个目标对象，并拦截目标对象的行为。例如，当访问目标对象的属性时，会自动调用 Proxy 对象的 get 方法。
下面是一个 Proxy 对象的基本用法示例：
-- -------------------- ---- -------
----- ------ - - ----- -------- ------ --- --
----- - - --- ------------- -
----------- ---- --------- -
---------------- ---------
------ ------------
--
----------- ---- ------ --------- -
---------------- ------ - -----------
----------- - ------
------ -----
--
---
------- -- -- ---- -------- -------
------- - ---- -- -- ---- ----- - ----在上述代码中，我们用了 Proxy 对象 p 来代理目标对象 target，并且定义了两个拦截器函数 get 和 set。当我们获取 p 对象上的属性 name 时，会自动调用 get 方法，并输出 "get name"，并且返回目标对象上的值 "Apple"；当我们修改 p 对象上的属性 price 时，会自动调用 set 方法，并输出 "set price = 300"，并且将目标对象上的 value 值修改为 300。
Proxy 对象的用法深入
除了上述的 get 和 set 方法外，Proxy 对象还支持多个其他方法，如 apply、construct、defineProperty 等方法。下面来一一介绍这些方法的具体应用场景。
defineProperty
defineProperty 方法用于拦截对目标对象的 Object.defineProperty 方法的调用。可以在这个方法中加入自己的逻辑，操作目标对象上的属性。
下面是一个 defineProperty 方法的示例：
-- -------------------- ---- -------
----- ------ - - ----- -------- ------ --- --
----- - - --- ------------- -
---------------------- ---- ----------- -
------------------- ---------
------ ----------------------------- ---- ------------
--
---
------------------------ -------- -
------ ------
--------- -----
----------- ------
---
---------------------在上述代码中，我们重新定义了 defineProperty 方法，当我们调用 Object.defineProperty 方法时，会自动调用这个方法，并输出 "define color"。我们可以添加自己的逻辑来操作目标对象中的属性。
apply
apply 方法用于拦截对目标对象的方法调用。可以在这个方法中加入自己的逻辑，操作目标对象及其方法。
下面是一个 apply 方法的示例：
-- -------------------- ---- -------
----- ------ - -
------ -- -
------ - - --
--
------ -- -
------ - - --
--
--
----- - - --- ------------- -
------------- -------- -------------- -
------------------ -----------------
--------------------------- -------------------
------ --------------------- ---------------
--
---
-------- ---
-------- ---在上述代码中，我们重新定义了 apply 方法，当我们调用 p 对象上的 add 方法时，会自动调用 apply 方法，并输出 name 以及传入的参数，从而让我们能够方便地追踪方法和参数。
construct
construct 方法用于拦截对目标对象的 new 操作符的调用。可以在这个方法中加入自己的逻辑，操作目标对象及其实例属性。
下面是一个 construct 方法的示例：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- ----------------
-
-
----- - - --- ------------- -
----------------- -------------- ---------- -
--------------------------- -------------------
----- -------- - --- -------------------------
------------ - ---
------ ---------
--
---
----- ------ - --- -----------
---------------
------------------------在上述代码中，我们重新定义了 construct 方法，当我们用 new p('Apple') 创建实例时，会自动调用 construct 方法，并输出传入的参数以及实例对象的 age 属性，从而让我们能够方便地追踪和操作实例对象。
Proxy 对象的高级用法
下面将介绍一些 Proxy 对象的高级用法，可以实现更加复杂的操作。
Proxy 的执行顺序
当我们使用 Proxy 对象代理目标对象时，会按照一定的顺序执行多个 Proxy 对象上的拦截器函数，为了更好地理解这种执行顺序，可以通过以下代码来进行演示：
-- -------------------- ---- -------
----- ------ - - ----- -------- ------ --- --
----- -- - --- ------------- -
----------- ---- --------- -
---------------- -----
------ ------------
--
---
----- -- - --- --------- -
----------- ---- --------- -
---------------- -----
------ ------------
--
---
---------------------在上述代码中，我们用 p1 Proxy 对象代理 target 目标对象，并定义了 get 方法。在 p2 Proxy 对象中，我们同样定义了 get 方法，并代理了 p1 Proxy 对象。当我们通过 p2 对象访问 name 属性时，会按照以下顺序执行：
- 先执行
p2的get方法，输出 "get p2"。 - 因为
p1也是一个 Proxy 对象，所以会再次执行p1的get方法，输出 "get p1"。 - 最后返回目标对象上的
name属性 "Apple"。
实现数据绑定
通过 Proxy 对象，我们可以实现数据的双向绑定，具体实现方法如下：
-- -------------------- ---- -------
----- ---- - - ----- ------- --
----- - - --- ----------- -
----------- ---- --------- -
---------------- ---------
------ ------------
--
----------- ---- ------ --------- -
---------------- ------ - -----------
----------- - ------
-- - --- ----- --- ----
----- -- - ---------------------------------------------
------------ - ------
------ -----
--
---
-- - ---- ----- --- ----
----------------------------------------------------- -- -
----- --- - ----------------
------------ - -------
---------------------------- -- -- -
------ - -------------
---
---
-- ----
------ - -----------在上述代码中，我们使用 Proxy 对象 p 代理了目标对象 data，并定义了 get 和 set 方法。在 set 方法中，我们除了更新目标对象上的属性外，还在方法中实现了对 DOM 上元素内容的修改。在最后的代码中，我们将 DATA 对象的属性和 DOM 元素相互绑定，并且当 DOM 元素的值发生改变时，能够自动将值赋值给 DATA 对象。
总结
通过上述介绍，我们可以发现 Proxy 对象是一种强大的数据代理工具，除了用于数据绑定以外，还有许多其他的应用场景。在使用 Proxy 对象时，需要注意各个方法的区别，以及执行顺序等问题，从而达到更加准确地掌控对象的目的，让数据更加透明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469d77e968c7c53b09a48dc