ES7 中的 Proxy 实现对象观察
随着 JavaScript 在前端开发中的广泛应用，对于数据的处理和管理越来越重要。在 ES7 中，引入了 Proxy 对象，可以帮助我们实现对象观察，从而更好地处理数据和管理应用程序。本文将详细介绍 Proxy 对象的使用以及使用场景。
什么是 Proxy 对象
Proxy 对象是 ES6 提供的一种代理机制，可以拦截对象的某些行为，从而实现对象级别的观察和控制。在 ES7 中，Proxy 对象进行了升级，支持了更多的拦截行为。
在使用 Proxy 对象之前，我们先来看一下 Object.defineProperty() 方法。这是 ES5 中提供的一种办法，用于定义一个新属性或修改一个存在的属性。但是，该方法存在一些缺陷，比如只能监控对象的属性访问和修改，无法监听对象的新增或删除属性等。
而 Proxy 对象提供了更多的拦截器方法，可以对对象的任何行为进行拦截和控制。它可以拦截的行为包括：属性的读取、属性的设置、属性的删除、in 运算符、函数的调用和构造函数的调用等。
示例代码
下面的示例代码中，我们将使用 Proxy 对象来拦截一个对象的读取行为，并输出一些调试信息。
-- -------------------- ---- -------
----- --- - -
----- -------
---- --
--
----- ---- - --- ---------- -
----------- ---- --------- -
-------------------- ------ -- ----------------------------
------ ------------------- ---- ----------
-
---
-----------------------
----------------------输出结果如下：
Getting name of {"name":"Jack","age":20}
Jack
Getting age of {"name":"Jack","age":20}
20可以看到，我们使用了一个 Proxy 对象 pobj 来代理 obj 对象，然后在 pobj 的 get() 方法中打印了一些调试信息。当我们访问 pobj 中的属性时，会触发代理的 get() 方法，从而输出调试信息。
使用场景
在实际开发中，我们可以使用 Proxy 对象来实现一些功能，比如：
- 对象观察和拦截
当我们需要实现一个对象级别的观察和拦截时，可以使用 Proxy 对象。通过拦截对象的 get() 和 set() 方法，可以监控对象属性的读取和修改，并实现一些特殊的处理，比如数据校验、数据过滤、数据加密等。
示例代码：
-- -------------------- ---- -------
----- --------- - -
---- -------- ----- ----- ------ -
-- ----- --- ------ -
-- -------------------------- -
----- --- -------------- -- --- -- ----------
- ---- -- ------ - - -- ----- - ---- -
----- --- --------------- -- ----------
-
-
--------- - ------
------ -----
-
--
----- ------ - --- --------- -----------
----------- - -----
---------- - ---
---------- - ----- -- ------ -- --- -- -------
---------- - ---- -- ------ -- -------
---------- - ---
------------------------ -- --在上面的示例代码中，我们定义了一个 validator 对象，该对象的 set() 方法用于拦截对象属性的设置操作，并进行数据校验。然后，我们通过 Proxy 对象 person 来管理一个空对象，并将 validator 对象作为 Proxy 的第二个参数传入。
当我们给 person 对象设置属性时，会触发 validator 对象的 set() 方法，并进行数据校验。如果数据不合法，则会抛出异常。
- 原型代理
通过设置 Proxy 对象的 get() 和 set() 方法，可以拦截对原型对象的访问和修改，并对其进行一些特殊处理。这样，我们就可以通过原型代理来实现一些特殊的功能，比如继承、属性绑定、数据过滤等。
示例代码：
-- -------------------- ---- -------
----- ----- - --- --------- -
----------- ---- --------- -
-------------------- ------ -- ----------------------------
------ ------------------- ---- ----------
--
----------- ---- ------ --------- -
-------------------- ------ -- -------- -- ----------------------------
------ ------------------- ---- ------ ----------
-
---
----- --- - ---------------------
-------- - -----
----------------------在上面的示例代码中，我们创建了一个原型对象 proto，并使用 Proxy 对象对其进行代理。然后，我们通过 Object.create(proto) 来创建一个新的对象 obj，并将其原型设为 proto。
当我们给 obj 中的属性赋值时，会触发代理对象 proto 的 set() 方法，并输出一些调试信息。当我们访问 obj 中的属性时，同样会触发代理对象 proto 的 get() 方法，并输出一些调试信息。
- 函数代理
我们可以使用 Proxy 对象来代理一个函数，并在其执行前后进行一些额外的处理，比如参数校验、返回值拦截等。这样，我们就可以对函数进行一些特殊的操作，从而实现一些高级的功能，比如 AOP（面向切面编程）等。
示例代码：
-- -------------------- ---- -------
-------- ------ -- -- -
------ - - - - --
-
----- ---- - --- ---------- -
------------- -------- ----- -
-- -------------- -- ------ --- --- ---------- -
----- --- -------------- --------- ---- -- ----------
-
----- ------ - --------------------- -------- ------
-- ------- -- ---- -
---------------- ------ -- ------- ---- -- ----- -- ------
- ---- -
---------------- ------ -- ---- ---- ------
-
------ -------
-
---
------------------- -- ----
-- --- ------ -- ---- ---- ---
-- -
-------------------- --- -----
-- --- ------ -- ------- ---- -- ----- -- ---
-- ---在上面的示例代码中，我们定义了一个 sum() 函数，并使用 Proxy 对象 psum 对其进行代理。然后，我们在 psum 的 apply() 方法中对函数的参数进行了校验，并在函数执行前后打印一些调试信息。
当我们调用 psum 函数时，会触发代理对象 psum 的 apply() 方法，并进行参数校验和结果拦截等。如果计算结果大于等于 100，则会输出一些特殊的信息。
总结
Proxy 对象是 ES6 中提供的代理机制之一，它支持多种拦截器方法，可以对对象的任何行为进行拦截和控制。在 ES7 中，Proxy 对象得到了更多的拓展和升级，可以实现对象级别的观察和控制。我们可以使用 Proxy 对象来实现一些特殊的功能，比如原型代理、函数代理等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec7d95f6b2d6eab36cc042