在 JavaScript 中，Proxy 是一个非常有用的特性，它允许我们拦截并改变对象的默认行为。在 ES6 中，Proxy 被引入作为一种新的原生对象类型，它可以被用来代理另一个对象，从而允许我们拦截并重写对象的默认操作。在 ES12 中，Proxy 被进一步增强，提供了更多的方法和功能，使得它成为前端开发中一个非常有用的工具。
Proxy 的基本用法
在 ES6 中，我们可以使用 new Proxy() 来创建一个代理对象。这个代理对象可以拦截目标对象的方法调用、属性访问、赋值等操作，并对其进行处理。下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- --
-
----- ------- - -
---- ---------------- --------- -
--------------- ----------- -----
------ -----------------
--
---- ---------------- --------- ------ -
--------------- ----------- --- -----------
---------------- - ------
-
-
----- ----- - --- ------------- ---------
----------- -- -- ---- --
--------- - --- -- -- --- --- --在这个示例中，我们使用 new Proxy() 创建了一个代理对象 proxy，并使用 handler 对象来定义代理对象的行为。handler 对象中定义了 get 和 set 方法，它们分别在获取和设置属性值时被调用。当我们通过 proxy.name 获取 name 属性时，get 方法会被调用，并输出 获取 name 属性 的日志信息。当我们通过 proxy.age = 20 设置 age 属性时，set 方法会被调用，并输出 设置 age 属性为 20 的日志信息。
Proxy 的高级用法
除了基本用法外，Proxy 还提供了一些高级用法，包括拦截函数调用、拦截构造函数、拦截对象的继承等。下面分别介绍这些用法。
拦截函数调用
在 ES12 中，Proxy 增加了一个新的拦截方法 apply()，它可以用来拦截函数的调用。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -------------- -
------------------- ----------
-
----- ------- - -
------ ---------------- -------- ----- -
----------------- -----------------
------ --------------------- ------
-
-
----- ----- - --- ------------- ---------
------------ -- ---- --------- ------ --在这个示例中，我们使用 new Proxy() 创建了一个代理对象 proxy，并使用 handler 对象来定义代理对象的行为。handler 对象中定义了 apply 方法，它在函数调用时被调用。当我们通过 proxy('张三') 调用函数 target 时，apply 方法会被调用，并输出 调用函数 target 的日志信息。
拦截构造函数
在 ES12 中，Proxy 增加了一个新的拦截方法 construct()，它可以用来拦截构造函数的调用。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
-
----- ------- - -
---------- ---------------- ----- -
------------------- -----------------
------ --- ----------------
-
-
----- ----- - --- ------------- ---------
----- ------ - --- ----------- ---- -- ------ ------
-------------------- -- -- ------ - ----- ----- ---- -- -在这个示例中，我们使用 new Proxy() 创建了一个代理对象 proxy，并使用 handler 对象来定义代理对象的行为。handler 对象中定义了 construct 方法，它在构造函数调用时被调用。当我们通过 new proxy('张三', 18) 调用构造函数 Person 时，construct 方法会被调用，并输出 调用构造函数 Person 的日志信息。
拦截对象的继承
在 ES12 中，Proxy 增加了一个新的拦截方法 getPrototypeOf()，它可以用来拦截对象的继承。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- --
-
----- ------- - -
--------------- ---------------- -
----------------- --------- ------
------ ------------------------------
-
-
----- ----- - --- ------------- ---------
---------------------------- -
------- ---
---
-------------------------- -- -在这个示例中，我们使用 new Proxy() 创建了一个代理对象 proxy，并使用 handler 对象来定义代理对象的行为。handler 对象中定义了 getPrototypeOf 方法，它在获取对象的原型时被调用。当我们通过 Object.setPrototypeOf(proxy, { gender: '男' }) 设置 proxy 对象的原型时，getPrototypeOf 方法会被调用，并输出 获取对象 [object Object] 的原型 的日志信息。
总结
Proxy 是一个非常有用的特性，它可以用来拦截并改变对象的默认行为。在 ES12 中，Proxy 被进一步增强，提供了更多的方法和功能，使得它成为前端开发中一个非常有用的工具。在使用 Proxy 时，我们可以根据实际需求来定义代理对象的行为，从而实现更加灵活和高效的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d6ef281886fbafa4487b35