Proxy 是 ECMAScript 6 中引入的一项新特性，它允许你在对象上设置一个“代理”，从而可以对对象的访问进行拦截和控制。在 ECMAScript 2017 中，Proxy 又得到了进一步增强和完善，本文将介绍如何使用 Proxy 并详细解释其具体用法。
Proxy 的基本用法
在 ECMAScript 中使用 Proxy 需要先创建一个 Proxy 对象，该对象接收两个参数：一个目标对象和一个处理程序对象。目标对象可以是任何对象，而处理程序则是在读取、写入、删除和其他操作时执行的函数调用。
下面是一个简单的例子，演示了如何使用 Proxy 记录一个对象的读取和写入：
-- -------------------- ---- -------
--- ------ - - ----- ----- ---- -- --
--- ------- - -
---- ---------------- ---- -
--------------------- - -----
------ ------------
--
---- ---------------- ---- ------ -
--------------------- - -----
----------- - ------
------ -----
-
--
--- ----- - --- ------------- ---------
----------- -- -------------
--------- - --- -- ------------上述代码中，我们首先定义了一个目标对象，该对象包含一个 name 属性和一个 age 属性。然后，我们定义了一个处理程序对象，该处理程序对象通过由 get 和 set 组成的方法实现了读取和写入。最后，我们使用 Proxy 对象来创建了一个被称为“代理对象”的新对象，并将它设置为目标对象的代理。
使用代理对象来读取和写入属性时，就会自动调用处理程序相应的方法，从而实现记录读取和写入的操作。
Proxy 的高级用法
除了基本的读取和写入之外，Proxy 还可以使用一些高级功能来实现特殊的操作，下面我们将详细介绍这些高级功能。
使用 Proxy 实现观察者模式
代理的一个常见应用是实现观察者模式，观察者模式是一种设计模式，用于对象间的一对多依赖关系。
观察者模式的实现需要用到两个对象：主题对象和观察者对象。主题对象负责通知观察者对象，当主题对象状态发生改变时，它会通过调用观察者对象的回调函数来通知观察者对象。
下面是使用 Proxy 实现观察者模式的代码示例：
-- -------------------- ---- -------
----- ------- -
------------- -
-------------- - ---
------ --- ----------- -
---- -------- ---- ------ -- -
----------- - ------
-----------------------------
------ -----
-
---
-
----------------------- -
------------------------------- -- ----------------------
-
--------------------- -
------------------------------
-
------------------------ -
-------------- - ------------------------- -- --- --- ----------
-
-
----- -------- -
------------- --
----------- -
--------------- -- --- - ------
-
-
--- ------- - --- ----------
--- --------- - --- -----------
--- --------- - --- -----------
-------------------------------
-------------------------------
------------ - ----- -- -- ---- ---上述代码中，我们首先定义了一个 Subject 类，它包含一个观察者数组和三个方法：notifyAllObservers、addObserver 和 removeObserver。在 Subject 类的构造函数中，我们使用 Proxy 对象创建了一个代理对象，在其中通过 set 方法来实现观察者模式的功能。每当属性被设置为新值时，代理对象会自动调用 notifyAllObservers 方法，通知所有的观察者对象。
然后，我们定义了一个 Observer 类，它包含一个 update 方法，用于接收主题对象的通知。
最后，我们创建了一个 Subject 对象，并向它添加了两个观察者对象：observerA 和 observerB。当 Subject 对象的 name 属性被设置为新值时，代理对象就会自动调用 notifyAllObservers 方法，通知所有的观察者对象。
使用 Proxy 实现数据绑定
另外一个常见应用场景是实现数据绑定，数据绑定是指在网页中实时更新数据的一种技术。下面是一个简单的数据绑定示例：
-- -------------------- ---- -------
--- --- - -
----- -----
---- --
--
-------- -------------- --- -
--- ----- - --- ----------- -
---- ---------------- ---- ------ -
----------- - ------
------------------------------------- - ------------
------ -----
-
---
------------------------------------- - ----------
--- ------ - -----------------------------------
--- ---- ----- -- ------- -
--- --- - -------------------------------
----------- - ----------
------------------------------- --------------- -
---------- - -------------------
---
-
------ ------
-
--- ----- - ------------- --------上述代码中，我们首先定义了一个包含 name 属性和 age 属性的对象。然后，我们定义了一个 bindData 函数，它接收两个参数：数据对象和绑定元素的 ID。在 bindData 函数中，我们使用 Proxy 对象创建了一个代理对象，并通过 set 方法来实现数据绑定的功能。每当代理对象的属性被设置为新值时，代理对象会自动更新页面上绑定元素的内容。
然后，我们获取页面上的所有 input 元素，并根据它们的 data-key 属性来设置它们的默认值。同时，我们添加了一个事件处理程序，以便在输入框中输入内容时，自动更新代理对象的属性值。
最后，我们返回了代理对象，以便可以在其他函数中使用它。
总结
在 ECMAScript 2017 中，Proxy 继续扩展了其功能并获得了更多应用场景。通过使用 Proxy，你可以实现观察者模式、数据绑定和其他高级功能，从而大大提高了在 JavaScript 中处理用户数据的能力和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c308da83d39b48816f682f