在 ES10 中，Proxy 对象是一个新的内置对象，它可以用于拦截并自定义 JavaScript 中的一些底层操作，例如：属性查找、赋值、函数调用等等。Proxy 对象的出现使得我们可以更加灵活地控制对象的行为，从而实现更加复杂的逻辑。
Proxy 对象的基本用法
在 ES10 中，我们可以使用 Proxy 构造函数来创建一个 Proxy 对象。Proxy 的基本语法如下：
const proxy = new Proxy(target, handler);
其中，target 是要拦截的对象，handler 是一个对象，它定义了一些拦截器函数，用于拦截一些底层操作。例如，我们可以使用 get 拦截器函数来拦截属性的读取操作：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- --
--
----- ------- - -
----------- ---- -
------------------- ---------
------ ------------
-
--
----- ----- - --- ------------- ---------
------------------------ -- ------ -------
----------------------- -- ------ ------在上面的代码中，我们使用 get 拦截器函数来拦截了 proxy 对象的属性读取操作。当我们读取 proxy 对象的属性时，get 拦截器函数会被调用，并输出一些调试信息。
Proxy 对象的高级用法
除了基本的拦截操作之外，Proxy 对象还支持一些高级的用法，例如：拦截函数调用、拦截属性赋值、拦截属性删除等等。下面是一些示例代码：
拦截函数调用
我们可以使用 apply 拦截器函数来拦截函数的调用操作。例如，我们可以使用 apply 拦截器函数来实现一个简单的函数计时器：
-- -------------------- ---- -------
-------- --------------- -
----- ------- - -
------------- -------- ----- -
----- ----- - -----------
----- ------ - --------------------- -------- ------
----- --- - -----------
--------------- -------------- -- ----- - ------ -----
------ -------
-
--
------ --- --------- ---------
-
-------- ------ -- -
------ - - --
-
----- ------------ - -----------------
--------------------------- ---- -- -- --- -- - ----在上面的代码中，我们使用 apply 拦截器函数来拦截了 addWithTimer 函数的调用操作。当我们调用 addWithTimer 函数时，apply 拦截器函数会被调用，并输出函数的执行时间。
拦截属性赋值
我们可以使用 set 拦截器函数来拦截属性的赋值操作。例如，我们可以使用 set 拦截器函数来实现一个简单的属性验证器：
-- -------------------- ---- -------
----- ------ - ---
----- ------- - -
----------- ---- ------ -
-- ------- ----- --- --------- -
----- --- ---------------------
-
----------- - ------
------ -----
-
--
----- ----- - --- ------------- ---------
--------- - --- -- ----
--------- - ----- -- -- ---------- -------在上面的代码中，我们使用 set 拦截器函数来拦截了 proxy 对象的属性赋值操作。当我们给 proxy 对象的属性赋值时，set 拦截器函数会被调用，并进行属性验证。
拦截属性删除
我们可以使用 deleteProperty 拦截器函数来拦截属性的删除操作。例如，我们可以使用 deleteProperty 拦截器函数来实现一个简单的防止误删除的对象：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- --
--
----- ------- - -
---------------------- ---- -
-- ---- --- ------- -
----- --- ----------- ---- -----
-
------ ------------
------ -----
-
--
----- ----- - --- ------------- ---------
------ ---------- -- ----
------ ----------- -- -- ------ ---- ---- --在上面的代码中，我们使用 deleteProperty 拦截器函数来拦截了 proxy 对象的属性删除操作。当我们删除 proxy 对象的属性时，deleteProperty 拦截器函数会被调用，并进行属性验证。
总结
通过本文的介绍，我们了解了 ES10 中 Proxy 对象的基本用法和一些高级用法。使用 Proxy 对象可以使我们更加灵活地控制对象的行为，从而实现更加复杂的逻辑。在实际开发中，我们可以根据自己的需求来选择使用合适的拦截器函数，从而实现自己想要的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656ecfa2d2f5e1655d716cf0