在 ECMAScript 2020 中，Proxy 是一个非常强大的功能，它可以捕获和处理对象的操作。Proxy 对象有六种 trap，它们分别是：
- get
- set
- has
- deleteProperty
- apply
- construct
在本篇文章中，我们将详细介绍这六种 trap 的使用技巧，并提供相关示例代码。
1. get
get trap 用于捕获对象属性的读取操作。它接收两个参数，分别是目标对象和属性名。我们可以在 get trap 中实现一些自定义的逻辑，比如隐藏属性、计算属性等。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
-
----- ----- - --- ------------- -
----------- -------- -
-- -------- --- ------ -
------ --------------- - -
- ---- -
------ ---------------
-
-
--
----------------------- -- -----
---------------------- -- --在上面的代码中，我们使用 get trap 实现了一个计算属性 age，它比原始的属性值多了 1。
2. set
set trap 用于捕获对象属性的赋值操作。它接收三个参数，分别是目标对象、属性名和属性值。我们可以在 set trap 中实现一些自定义的逻辑，比如属性值的校验、属性值的转换等。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
-
----- ----- - --- ------------- -
----------- -------- ------ -
-- -------- --- ------ -
-- ------ - - -- ----- - ---- -
----- --- -------------- -----
-
-
--------------- - -----
-
--
--------- - --- -- ------ ------- ---在上面的代码中，我们使用 set trap 实现了一个属性值的校验逻辑，如果属性值不在合法范围内，就会抛出一个错误。
3. has
has trap 用于捕获 in 操作符的操作。它接收两个参数，分别是目标对象和属性名。我们可以在 has trap 中实现一些自定义的逻辑，比如隐藏属性、计算属性等。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
-
----- ----- - --- ------------- -
----------- -------- -
-- -------- --- ------ -
------ -----
- ---- -
------ ------- -- ------
-
-
--
------------------ -- ------ -- ----
----------------- -- ------ -- -----在上面的代码中，我们使用 has trap 隐藏了属性 age，使得它不会出现在 in 操作符的结果中。
4. deleteProperty
deleteProperty trap 用于捕获 delete 操作符的操作。它接收两个参数，分别是目标对象和属性名。我们可以在 deleteProperty trap 中实现一些自定义的逻辑，比如删除保护属性、删除相关联的属性等。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- --
-
----- ----- - --- ------------- -
---------------------- -------- -
-- -------- --- ------ -
----- --- ------------- ------ -----
- ---- -
------ ---------------
------ ----
-
-
--
------ ---------- -- ----
------ --------- -- ------ ------ ------ ---在上面的代码中，我们使用 deleteProperty trap 实现了一个删除保护属性的逻辑，如果属性名为 age，就会抛出一个错误。
5. apply
apply trap 用于捕获函数的调用操作。它接收三个参数，分别是目标函数、目标对象和参数数组。我们可以在 apply trap 中实现一些自定义的逻辑，比如函数参数的校验、函数结果的转换等。
下面是一个示例代码：
-- -------------------- ---- -------
-------- ------ -- -
------ - - -
-
----- ----- - --- ---------- -
------------- -------- ----- -
-- ------------ --- -- -
----- --- -------------- -----------
- ---- -
------ --------------------- ----- - -
-
-
--
-------------------- --- -- -
--------------------- -- ------ ------- ---------在上面的代码中，我们使用 apply trap 实现了一个函数参数的校验逻辑，如果参数个数不为 2，就会抛出一个错误。
6. construct
construct trap 用于捕获 new 操作符的操作。它接收两个参数，分别是目标函数和参数数组。我们可以在 construct trap 中实现一些自定义的逻辑，比如创建单例对象、创建代理对象等。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - ----
-------- - ---
-
-
----- ----- - --- ------------- -
----------------- ----- -
----- -------- - --- ---------------
------ --- --------------- -
----------- -------- -
-- -------- --- ------ -
------ --------------- - -
- ---- -
------ ---------------
-
-
--
-
--
----- --- - --- ------------ ---
--------------------- -- -----
-------------------- -- --在上面的代码中，我们使用 construct trap 创建了一个代理类，它会在创建实例时自动添加一个计算属性 age，比原始的属性值多了 1。
总结
在 ECMAScript 2020 中，Proxy 是一个非常强大的功能，它可以捕获和处理对象的操作。Proxy 对象有六种 trap，它们分别是 get、set、has、deleteProperty、apply、construct。我们可以使用这些 trap 实现一些自定义的逻辑，比如隐藏属性、计算属性、属性值的校验、属性值的转换、删除保护属性、创建单例对象、创建代理对象等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6566c20dd2f5e1655dfbaeca