在 ECMAScript 2019 中，引入了一个新的特性 Proxy，它可以让开发者自定义对象属性的行为。使用 Proxy，我们可以拦截对象的各种操作，例如读取属性、设置属性、删除属性等等。这个特性的出现，让我们可以更加灵活地操作对象，使得我们的代码更加简洁、易读、易维护。
Proxy 的基本用法
Proxy 的基本用法非常简单，我们只需要创建一个 Proxy 对象，然后在它上面定义一些拦截函数即可。下面是一个简单的示例代码：
-- -------------------- ---- -------
--- --- - --- --------- -
---- ---------------- ---- -
----------------- ---------
------ ------------
--
---- ---------------- ---- ------ -
----------------- ------------------
----------- - ------
------ -----
-
---
------- - ---- -- ---- -------
--------------------- -- ---- ------ ---在上面的代码中，我们使用了一个空对象作为 Proxy 的 target，然后定义了两个拦截函数：get 和 set。当我们读取 obj.foo 属性时，会触发 get 拦截函数；当我们设置 obj.foo 属性时，会触发 set 拦截函数。在每个拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。
Proxy 的高级用法
除了基本用法之外，Proxy 还有很多高级用法，可以让我们更加灵活地操作对象。下面是一些常见的高级用法：
拦截属性的读取和设置
我们可以使用 get 和 set 拦截函数，拦截对象属性的读取和设置。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。
-- -------------------- ---- -------
--- --- - --- --------- -
---- ---------------- ---- -
----------------- ---------
------ ------------
--
---- ---------------- ---- ------ -
----------------- ------------------
----------- - ------
------ -----
-
---
------- - ---- -- ---- -------
--------------------- -- ---- ------ ---拦截属性的删除
我们可以使用 deleteProperty 拦截函数，拦截对象属性的删除操作。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。
-- -------------------- ---- -------
--- --- - --- ------- ---- --- -- -
--------------- ---------------- ---- -
----------------- ---------
------ ------------
------ -----
-
---
------ -------- -- ---- ---
--------------------- -- ---------拦截属性的枚举
我们可以使用 ownKeys 拦截函数，拦截对象属性的枚举操作。在拦截函数中，我们可以自定义一些操作，例如过滤属性、排序属性等等。
let obj = new Proxy({ foo: 123, bar: 456 }, {
ownKeys: function(target) {
return Object.keys(target).filter(key => key !== 'bar');
}
});
console.log(Object.keys(obj)); // ['foo']拦截方法的调用
我们可以使用 apply 拦截函数，拦截对象方法的调用操作。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证参数、修改返回值等等。
-- -------------------- ---- -------
--- --- - --- -------
---- ----------- -- -
------ - - --
-
-- -
------ ---------------- -------- ----- -
----------------- ----------------------------- -------
------ --------------------- ------
-
---
---------------------- ---- -- ---- ------ ----- -Proxy 的指导意义
使用 Proxy，我们可以更加灵活地操作对象，使得我们的代码更加简洁、易读、易维护。在实际开发中，我们可以使用 Proxy 来实现一些高级的功能，例如数据绑定、事件监听、状态管理等等。同时，我们也需要注意一些性能问题，避免过度使用 Proxy 导致性能问题。
在学习 Proxy 的过程中，我们也需要了解一些相关的知识，例如 Reflect 对象、Symbol 对象、Promise 对象等等。这些知识可以帮助我们更好地理解和使用 Proxy。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3e42aa941bf71347634c6