数据可观测化：使用 ES9 中的 Proxy 和 Reflect 实现
前言
数据可观测化应该是我们在前端类应用中比较常见的一个场景，比如 React 中的 state 和 props 以及 Vue 中的 data 和 props 等。当我们改变这些变量的值的时候，整个应用都会进行响应式的变化，这就是数据可观测化。
那么在本文中，我们将讨论如何使用 ES9 中新增的对象 Proxy 和 Reflect 实现数据可观测化，让我们的前端应用更加优秀和高效。
什么是 Proxy 和 Reflect
在ES6中添加了一个新的内置对象 Proxy，它可以对任意对象进行阻拦操作，并在目标对象的基础上进行拦截或修改，这使我们能够在访问或修改对象的属性或方法时，可以增加自己的逻辑处理，从而更加灵活地实现许多常见的操作。
同时，还有一个新的内置对象 Reflect 出现，它提供了一些方法，可以用来代替 Object 对象上的一些方法，比如 Object.defineProperty() 等方法的操作。
接下来我们就可以使用这两个对象来实现数据可观测化了。
数据可观测化的实现
在 Javascript 中，当我们操作一个对象的属性时，会有一些方法需要被调用，比如 get、set 等方法，这些方法就是 Proxy 提供的拦截器。
那么让我们来看一个简单的例子，如何使用 Proxy 实现数据的可观测化。
-- -------------------- ---- -------
----- -------- - ----- --------- -- -
------ --- ---------- -
----------- ---- ------ --------- -
----- ------ - -----------
----- --- - ------------------- ---- ------ ---------
-- ------- --- ------ -
------------- ------ -------
-
------ ---
-
--
-
----- ----- - -
----- --------
---- ---
-
----- ------------- - --------------- ----- ------- ------- -- -
------------------------ ----------------- ------------------
--
------------------ - -----
----------------- - --在这个例子中，我们定义了一个函数 observer 来实现数据可观测化。函数传入两个参数，一个是待观测的对象，另一个是一个更新回调函数，当对象的属性有变化时，更新回调函数将会被触发。
在函数体中，我们创建了一个代理对象 Proxy(obj, {}) 来拦截对象的 set 操作。在 set 操作中，我们比较了新值与旧值是否相同，如果不同则触发回调函数，并将 key、newVal 和 oldVal 传递给它。
使用 observe 函数来实现数据观测，比较简单地侵入了应用的代码。只需要将需要观测的数据通过 observer 函数进行代理，然后使用观测后的数据，就可以在回调函数中控制我们的业务逻辑。
最后，运行代码，我们就可以看到控制台输出：
key:name, newVal:Bob, oldVal:Alice key:age, newVal:19, oldVal:18
总结
在本文中，我们介绍了 Proxy 和 Reflect 这两个 ES9 新增的对象，以及如何使用它们来实现数据的可观测化，从而实现对前端应用的更加优秀和高效的控制。
我们希望这篇文章能够对您实现数据可观测化、理解 Proxy 和 Reflect 的作用有所帮助，同时，也为您提供了一些编程上的思路和方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a769b8add4f0e0ff079db8