代理是一种新的 ECMAScript 2017 中的特性，它能够允许开发者拦截和定义对象的操作。这个特性为前端开发者带来了一些新的机会，无论是实现特殊的行为或者简化代码。
代理对象充当目标对象的代理或包装器，当我们在代理对象上执行操作时，操作会被转发到目标对象上。代理对象允许我们重载一些基本操作（例如对象的属性访问、赋值和方法调用）。
Proxy 对象的基本原理
在 Proxy 诞生之前，JavaScript 对象是由键值对组成的。我们可以通过以下方式访问对象属性：
const obj = { a: 10 };
console.log(obj.a); // 10如果我们要通过 Proxy 实现以上功能，则需要创建一个代理对象：
-- -------------------- ---- -------
----- ------- - -
---- ---------------- ---- -
------ ------------
-
--
----- --- - - -- -- --
----- -------- - --- ---------- ---------
------------------------ -- --上述代码实现了一个最基本的代理对象。它允许我们访问 target 对象的属性。当我们获取代理对象的属性时，该操作将被转发到目标对象（target）上。
使用 Proxy 实现数据绑定
在前端开发中，我们经常需要将某些数据绑定到页面上。这种情况下，一个对代理对象的掌握，将会让开发者更加方便地处理数据绑定。下面是一个使用 Proxy 实现数据绑定的示例程序：
-- -------------------- ---- -------
----- ---- - -
-- ---
-- ---
---- -
--
----- ------- - -
---- ---------------- ---- -
------------------ ---------
------ ------------------- -----
--
---- ---------------- ---- ------ -
------------------ ------ - -----------
-- ---- --- ------ -
----------- - ------
- ---- -
----- -------- - ------------
----------- - ------
---------- -- ------ - ----------
-
------ -----
-
--
----- --------- - --- ----------- ---------
----------- - ---
----------- - ---
--------------------------- -- --上述代码中，我们在 handler 对象中定义了 get 和 set 操作。代理对象允许我们重载这些基本操作，并在这些操作中添加自定义行为。在 set 操作中，我们计算数据 a 和 b 的总和，并将结果存储在数据 sum 中。
当我们在下面进行这些操作时：
proxyData.a = 30; proxyData.b = 10; console.log(proxyData.sum); // 30
通过在代理对象中实现 get 和 set，我们就能够方便地对数据进行操作，并在数据发生改变时动态地更新其他代码上的变化。
拦截所有操作
在一些情况下，我们希望能够预览和干涉在代理对象上执行的所有操作，而不仅仅是特定操作。为此，我们可以使用代理对象的一个特殊属性： new Proxy({}, {apply(target, thisArg, argumentsList) {})}。下面是一个拦截整个代理对象的示例程序：
-- -------------------- ---- -------
----- ------- - -
---- ---------------- ---- -
------ ------------------- -----
--
------ ---------------- -------- -------------- -
----------------- -----------------------------------
------ --------------------- -------- ---------------
--
---------- ---------------- -------------- ---------- -
---------------- -----------------------------------
------ ------------------------- -------------- -----------
--
---- ---------------- ---- ------ -
------------------ ------ - -----------
------------------- ---- -------
------ -----
-
--
----- --------- - ----------- -- -
------ -
-- --
-- --
---- ---------- -
------ ------ - -------
-
--
--
----- -------- - --- ---------------- -----------在上述代码中，我们使用代理对象的 apply 和 construct 操作定义了函数调用和构造函数调用的行为。代理对象还用于拦截 set 操作。在 set 操作中，我们在输出日志之后，将操作转发到 target 对象上。
总结
通过上述示例程序，我们可以看到在 ECMAScript 2017 中的 Proxy 是一种强大的工具。代理对象允许我们重载基本操作，并定义新的相应操作。这使得在前端开发中实现输入绑定和验证，构建 mock 和根据日志调试代码的工作更加容易。
重新思考你的 JavaScript 代码，并在日常开发工作中试试使用 Proxy 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64834ccc48841e98942c40db