在 Web 开发中，我们经常需要通过观察对象的变化来更新用户界面或执行一些操作。为了实现这个功能，我们可以使用 Object.observe() 方法。
Object.observe() 的作用
Object.observe() 方法可用于监视 JavaScript 对象的变化，并在对象属性发生更改时通知函数。这个方法接受两个参数：要监视的对象和回调函数。
例如，下面是一个简单的示例：
-- -------------------- ---- ------- --- ------ - - ----- ------- ---- -- -- -------- ----------------- - --------------------- - ---------------------- ---------- ---------- - --- -- ------- -- ----- ------ ----- --------- ------- ------ ------- ---- --- --
在这个示例中，我们创建了一个名为 person 的对象，并向它添加了一个 age 属性。然后，我们定义了一个名为 callback 的函数，用于监听对象的变化。最后，我们使用 Object.observe() 方法将 person 对象绑定到 callback 函数上，并修改了 age 属性的值。因此，在控制台中打印出了一个包含有关属性更改的信息的数组。
浏览器支持情况
然而，需要注意的是，由于 Object.observe() 方法不再被维护，现代浏览器不再支持该方法。实际上，目前只有 Chrome 36 和 Firefox 14 及以下版本支持它。
在 ES6 中，Object.observe() 方法已被废弃，取而代之的是 Proxy。Proxy 可以通过拦截对象属性的读写操作来实现类似于 Object.observe() 的功能。以下是一个使用 Proxy 实现属性观察的示例：
-- -------------------- ---- -------
--- ------ - - ----- ------- ---- -- --
--- ------- - -
---- ------------- ----- ------ -
--------- - ------
---------------- - - --- ---- ----------
-
--
--- ----- - --- ------------- ---------
--------- - --- -- ------- ---- --- ---- --------这个示例中使用了 Proxy 对象来实现属性监听。我们创建了一个 handler 对象，并重写了其 set 方法。然后，我们使用 new Proxy() 创建了一个代理对象 proxy，并将 handler 分配给它。当我们更新 proxy 的属性时，代理会调用其 set 方法，从而触发控制台日志。
总结
尽管 Object.observe() 方法已被废弃，但仍然有很多替代方案可以用来实现对象属性的观察和监听。在现代浏览器中，我们可以使用 Proxy 对象来完成这项任务。虽然语法可能略有不同，但思想基本相同：监听对象属性的变化，以便及时响应用户交互或其他事件。
希望本文对你有所启发，可以帮助你更好地理解 JavaScript 对象属性的观察和监听。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13826