在 JavaScript 中，对象是一种重要的数据类型，它们可以存储和传递数据，也可以作为函数的参数和返回值。在 ES6 中，引入了 Proxy 对象，可以对 JavaScript 对象进行拦截和定制，为我们提供了更多的灵活性和控制能力。
什么是 Proxy？
Proxy 是 ES6 中的一个新对象，它可以包装另一个对象，并拦截该对象的所有操作，包括访问、赋值、删除等。通过 Proxy，我们可以对对象的行为进行拦截和定制，从而实现更加灵活和复杂的功能。
如何使用 Proxy？
使用 Proxy 需要创建一个 Proxy 对象，并传入一个目标对象和一个处理器对象。处理器对象中包含了一组拦截方法，用于拦截目标对象的各种操作。
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
--
----- ------- - -
----------- ---- -
----------------- ---------
------ ------------
--
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
--
---------------------- ---- -
----------------- ---------
------ ------------
--
--
----- ----- - --- ------------- ---------
------------------------ -- ---- ------- ----
--------- - --- -- ---- --- -- --
----------------------- -- ---- ------ --
------ ----------- -- ---- ----在上面的示例中，我们创建了一个目标对象 target，包含了两个属性 name 和 age。然后创建了一个处理器对象 handler，包含了三个拦截方法：get、set 和 deleteProperty，用于拦截目标对象的访问、赋值和删除操作。最后创建了一个 Proxy 对象 proxy，将目标对象和处理器对象传入，通过 proxy 对象来访问、赋值和删除目标对象的属性。
Proxy 的拦截方法
Proxy 的处理器对象中包含了一组拦截方法，用于拦截目标对象的各种操作。下面介绍一些常用的拦截方法。
get(target, key, receiver)
拦截对象属性的读取操作，例如 proxy.name。
target：目标对象。key：属性名称。receiver：Proxy 或继承 Proxy 的对象。
该方法可以返回被拦截属性的值，也可以返回一个新值。
-- -------------------- ---- -------
----- ------ - -
----- -----
--
----- ------- - -
----------- ---- -
----------------- ---------
------ ------------
--
--
----- ----- - --- ------------- ---------
------------------------ -- ---- ------- ----set(target, key, value, receiver)
拦截对象属性的赋值操作，例如 proxy.age = 18。
target：目标对象。key：属性名称。value：属性值。receiver：Proxy 或继承 Proxy 的对象。
该方法可以返回一个布尔值，表示是否修改成功。
-- -------------------- ---- -------
----- ------ - -
---- ---
--
----- ------- - -
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
------ -----
--
--
----- ----- - --- ------------- ---------
--------- - --- -- ---- --- -- --
----------------------- -- ---- ------ --deleteProperty(target, key)
拦截对象属性的删除操作，例如 delete proxy.name。
target：目标对象。key：属性名称。
该方法可以返回一个布尔值，表示是否删除成功。
-- -------------------- ---- -------
----- ------ - -
----- -----
--
----- ------- - -
---------------------- ---- -
----------------- ---------
------ ------------
------ -----
--
--
----- ----- - --- ------------- ---------
------ ----------- -- ---- ----has(target, key)
拦截 in 操作符，例如 key in proxy。
target：目标对象。key：属性名称。
该方法可以返回一个布尔值，表示属性是否存在。
-- -------------------- ---- -------
----- ------ - -
----- -----
--
----- ------- - -
----------- ---- -
----------------- ------ -------
------ --- -- -------
--
--
----- ----- - --- ------------- ---------
------------------ -- ------- -- ---- ---- ------- ----apply(target, thisArg, argumentsList)
拦截函数的调用操作，例如 proxy(...args)。
target：目标函数。thisArg：函数的this值。argumentsList：函数的参数列表。
该方法可以返回函数的返回值。
-- -------------------- ---- -------
----- ------ - -------- --- -- -
----------------- ---------- ---- - -------
------ - - --
--
----- ------- - -
------------- -------- -------------- -
----------------- ---------- -------------------
------ -------------------------
--
--
----- ----- - --- ------------- ---------
-------------------- ---- -- ---- ---------- - - ---- -construct(target, argumentsList, newTarget)
拦截 new 操作符，例如 new proxy(...args)。
target：目标函数。argumentsList：函数的参数列表。newTarget：要被构造的新对象。
该方法可以返回一个对象，表示构造函数的实例。
-- -------------------- ---- -------
----- ------ - -------- ------ ---- -
----------------- ---------- ------- - ---------
--------- - -----
-------- - ----
--
----- ------- - -
----------------- -------------- -
----------------- ---------- -------------------
------ --- -------------------------
--
--
----- ----- - --- ------------- ---------
----- --- - --- ----------- ---- -- ---- ---------- -- - --
---------------------- -- -- ----
--------------------- -- -- --Proxy 的应用场景
Proxy 可以用于各种场景，例如数据劫持、事件代理、数据缓存、远程调用等。下面介绍一些常见的应用场景。
数据劫持
数据劫持是指在对象的属性被访问、赋值或删除时，拦截这些操作并进行处理。通过 Proxy，我们可以对对象的属性进行拦截和定制，实现数据劫持的功能。
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
--
----- ------- - -
----------- ---- -
----------------- ---------
------ ------------
--
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
-- --------
------ -----
--
---------------------- ---- -
----------------- ---------
------ ------------
-- --------
------ -----
--
--
----- ----- - --- ----------- ---------
---------- - ----- -- ---- ---- -- ----
------ ---------- -- ---- ---在上面的示例中，我们创建了一个数据对象 data，包含了两个属性 name 和 age。然后创建了一个处理器对象 handler，包含了三个拦截方法 get、set 和 deleteProperty，用于拦截对象的访问、赋值和删除操作。最后创建了一个 Proxy 对象 proxy，将数据对象和处理器对象传入，通过 proxy 对象来访问、赋值和删除数据对象的属性。
事件代理
事件代理是指将事件处理程序绑定到父元素上，通过事件冒泡机制来处理子元素的事件。通过 Proxy，我们可以对事件处理程序进行拦截和定制，实现事件代理的功能。
-- -------------------- ---- -------
----- ------- - -
----------- ---- -
----------------- ---------
-- ---- --- ------------------- -
------ -------- ------ --------- -
-------------------- ----------
----------------------------- ----------
--
-
------ ------------
--
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
------ -----
--
---------------------- ---- -
----------------- ---------
------ ------------
------ -----
--
--
----- ----- - --- --------------- ---------
------------------------------- -------- ------- -
------------------------------------
---在上面的示例中，我们创建了一个处理器对象 handler，包含了三个拦截方法 get、set 和 deleteProperty，用于拦截对象的访问、赋值和删除操作。在 get 方法中，当属性为 addEventListener 时，返回一个新的函数，用于添加事件监听器。最后创建了一个 Proxy 对象 proxy，将 document 对象和处理器对象传入，通过 proxy 对象来添加事件监听器。
数据缓存
数据缓存是指将数据存储在本地或远程，以便快速访问和减少网络请求。通过 Proxy，我们可以对数据对象进行拦截和定制，实现数据缓存的功能。
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
--
----- ----- - --- ------
----- ------- - -
----------- ---- -
----------------- ---------
-- ---------------- -
--------------------- ---------
------ ---------------
-
------ ------------
--
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
-------------- -------
------ -----
--
---------------------- ---- -
----------------- ---------
------ ------------
------------------
------ -----
--
--
----- ----- - --- ----------- ---------
----------- -- ---- ------- ----
----------- -- -------- ------- ----
--------- - --- -- ---- --- -- --
---------- -- ---- ------ --在上面的示例中，我们创建了一个数据对象 data，包含了两个属性 name 和 age。然后创建了一个 Map 对象 cache，用于缓存属性值。然后创建了一个处理器对象 handler，包含了三个拦截方法 get、set 和 deleteProperty，用于拦截对象的访问、赋值和删除操作。在 get 方法中，当属性存在于缓存中时，返回缓存中的值。在 set 方法中，将属性值存储到缓存中。最后创建了一个 Proxy 对象 proxy，将数据对象和处理器对象传入，通过 proxy 对象来访问、赋值和删除数据对象的属性。
远程调用
远程调用是指通过网络调用远程服务器上的函数或方法。通过 Proxy，我们可以对远程对象进行拦截和定制，实现远程调用的功能。
-- -------------------- ---- -------
----- ------- - -
----------- ---- -
----------------- ---------
------ -------- --------- -
------------------- ---------- ----------
-- --------
--
--
----------- ---- ------ -
----------------- ------ -- -----------
----------- - ------
------ -----
--
---------------------- ---- -
----------------- ---------
------ ------------
------ -----
--
--
----- ----- - --- --------- ---------
----------------- ---------- -- ------ --------- ------ ---------在上面的示例中，我们创建了一个处理器对象 handler，包含了三个拦截方法 get、set 和 deleteProperty，用于拦截对象的访问、赋值和删除操作。在 get 方法中，当属性被访问时，返回一个新的函数，用于调用远程方法。最后创建了一个 Proxy 对象 proxy，将空对象和处理器对象传入，通过 proxy 对象来调用远程方法。
总结
Proxy 是 ES6 中的一个新对象，可以对 JavaScript 对象进行拦截和定制，为我们提供了更多的灵活性和控制能力。通过 Proxy，我们可以实现数据劫持、事件代理、数据缓存、远程调用等功能，为前端开发提供了更多的解决方案。在使用 Proxy 时，需要注意其性能和兼容性，避免滥用和误用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bbda4eb4cecbf2d0fac6e