Object.observe因设计复杂、性能问题及Proxy的出现被废弃，现主要通过Proxy实现对象监听，也可用Object.defineProperty或响应式框架替代。
Object.observe
曾是 JavaScript 中一个非常有前景的提案，它允许开发者直接监听对象属性的变化。然而，这个特性最终在 ES2016 规范制定过程中被废弃了。现在，要实现类似的对象变化监听功能，我们主要依赖 ES6 引入的
Proxy
对象，或者通过自定义
setter/getter
函数 (
Object.defineProperty
) 来实现，更复杂的场景则会借助各种响应式编程库或框架。
解决方案
Object.observe
的初衷是提供一种高效、原生的方式来追踪 JavaScript 对象的修改，包括属性的添加、删除、修改，甚至是属性描述符的变化。它通过一个回调函数来接收这些变化通知。但由于其设计上的复杂性、性能考量以及与新兴的
Proxy
机制相比缺乏灵活性，最终被标准委员会放弃了。
要替代
Object.observe
的功能，我们现在主要有以下几种策略：
1. 使用 ES6 Proxy
立即学习“Java免费学习笔记（深入）”；
Proxy
是目前最强大、最通用的解决方案。它允许你为目标对象创建一个代理，然后拦截对该对象的所有操作，比如属性的读取 (
get
)、设置 (
set
)、删除 (
deleteProperty
) 等。通过在这些拦截器（称为“陷阱”或
trap
）中加入自定义逻辑，我们就能实现对对象变化的监听。
function createReactiveObject(obj, callback) { return new Proxy(obj, { set(target, property, value, receiver) { const oldValue = target[property]; // 避免不必要的触发，如果新旧值相同（且不是NaN） if (oldValue === value) { return true; } const result = Reflect.set(target, property, value, receiver); // 只有成功设置了属性才触发回调 if (result) { callback({ type: 'update', property: property, oldValue: oldValue, newValue: value, target: target }); } return result; }, deleteProperty(target, property) { if (Reflect.has(target, property)) { const oldValue = target[property]; const result = Reflect.deleteProperty(target, property); if (result) { callback({ type: 'delete', property: property, oldValue: oldValue, target: target }); } return result; } return false; // 属性不存在，删除失败 }, // 也可以拦截属性的添加，但通常 set 已经涵盖了首次赋值 // get(target, property, receiver) { ... } });}let data = { a: 1, b: 'hello' };let reactiveData = createReactiveObject(data, (change) => { console.log('对象发生变化:', change);});reactiveData.a = 2; // 输出: 对象发生变化: { type: 'update', property: 'a', oldValue: 1, newValue: 2, target: { a: 2, b: 'hello' } }reactiveData.c = 3; // 输出: 对象发生变化: { type: 'update', property: 'c', oldValue: undefined, newValue: 3, target: { a: 2, b: 'hello', c: 3 } }delete reactiveData.b; // 输出: 对象发生变化: { type: 'delete', property: 'b', oldValue: 'hello', target: { a: 2, c: 3 } }
Proxy
的强大之处在于它能拦截几乎所有的对象操作，这让我们可以构建出非常灵活和强大的响应式系统，Vue 3 的响应式核心就是基于
Proxy
实现的。
2. 使用 Object.defineProperty 定义 Setter/Getter
这是在
Proxy
出现之前，实现对象属性监听的常见方法。通过
Object.defineProperty
，我们可以为对象的特定属性定义自定义的
getter
和
setter
函数。当属性被读取或修改时，这些函数会被调用。
function defineReactiveProperty(obj, key, val, callback) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { // console.log(`属性 ${key} 被读取`); return val; }, set(newVal) { if (newVal === val) { return; } const oldValue = val; val = newVal; callback({ type: 'update', property: key, oldValue: oldValue, newValue: newVal, target: obj }); // console.log(`属性 ${key} 被修改为 ${newVal}`); } });}let oldData = { x: 10, y: 'world' };defineReactiveProperty(oldData, 'x', oldData.x, (change) => { console.log('对象属性变化:', change);});defineReactiveProperty(oldData, 'y', oldData.y, (change) => { console.log('对象属性变化:', change);});oldData.x = 20; // 输出: 对象属性变化: { type: 'update', property: 'x', oldValue: 10, newValue: 20, target: { x: 20, y: 'world' } }oldData.y = 'hello world'; // 输出: 对象属性变化: { type: 'update', property: 'y', oldValue: 'world', newValue: 'hello world', target: { x: 20, y: 'hello world' } }oldData.z = 30; // 无法监听，因为 z 不是通过 defineReactiveProperty 定义的
这种方法在 Vue 2.x 中被广泛使用，但它有明显的局限性：无法直接监听对象属性的添加和删除，也无法监听数组索引的变化（需要对数组方法进行额外封装）。
3. 响应式库/框架
如果你正在使用 Vue、React (结合状态管理库如 Redux/MobX)、Angular 等现代前端框架，它们通常已经内置了强大的响应式系统。这些系统在底层会利用
Proxy
或
Object.defineProperty
来实现对数据的监听和视图的自动更新，你通常不需要手动去实现这些细节。例如，Vue 3 的
reactive
函数就是基于
Proxy
实现的，而 MobX 也是通过
Proxy
或
defineProperty
来创建可观察对象的。
Object.observe
Object.observe
究竟为什么被废弃？深入探讨其设计缺陷与社区考量
说实话，
Object.observe
的废弃，在当时社区里还是引起了一波讨论的。我个人觉得，这背后并非单一原因，而是多方面因素交织的结果，既有技术层面的考量，也有标准制定哲学上的取舍。
首先，性能与实现复杂度是绕不开的话题。尽管
Object.observe
旨在提供原生、高效的监听机制，但要在 JavaScript 引擎层面实现对所有对象、所有类型变化的细粒度追踪，并保证性能开销可控，这本身就是一项巨大的挑战。想象一下，一个对象可能被多个观察者监听，每次变化都需要遍历这些观察者并触发回调，这在大型应用中可能会形成不小的性能瓶颈。更重要的是，它的异步通知机制，虽然避免了同步修改导致的无限循环问题，但也引入了新的复杂性，比如如何处理短时间内多次修改的批处理、如何保证通知的顺序等，这些都需要引擎进行复杂的调度和优化。
其次，粒度与实用性的平衡。
Object.observe
提供了非常细致的变化类型（
add
、
update
、
delete
、
splice
、
setPrototype
、
reconfigure
），这在理论上很美好，但在实际开发中，开发者往往只需要知道“某个东西变了”，而不需要知道它具体是“被添加了”还是“被修改了”。这种过度的粒度，反而增加了开发者处理回调逻辑的负担，使得 API 显得有些笨重。
再者，与新兴的
Proxy
机制的重叠与冲突。当
Proxy
作为 ES6 的一部分被提出并逐渐成熟时，
Object.observe
的地位就变得尴尬了。
Proxy
提供了一种更底层、更通用的元编程能力，它能拦截对象的所有基本操作，而不仅仅是属性变化。这意味着，开发者可以基于
Proxy
自己构建出各种各样的“观察”机制，其灵活性远超
Object.observe
。标准委员会可能认为，提供一个更基础、更强大的原语 (
Proxy
)，让开发者在此基础上构建上层应用，比提供一个特定场景 (
Object.observe
) 的高层 API 更符合 JavaScript 的设计哲学。
Proxy
给了开发者更多的控制权和可能性，而
Object.observe
则显得过于“意见化”和受限。
最后，浏览器厂商的采纳意愿也是一个关键因素。虽然 Chrome 率先实现了
Object.observe
，但其他主要浏览器（如 Firefox 和 Safari）并没有积极跟进。在没有广泛共识和采纳的情况下，一个特性很难成为真正的 Web 标准。TC39（ECMAScript 标准委员会）在权衡利弊后，最终决定将其从规范中移除，将精力集中在
Proxy
等更具前瞻性和通用性的特性上。
所以，
Object.observe
的废弃，可以说是一个“生不逢时”的例子。它试图解决一个真切的需求，但在技术演进的浪潮中，被更通用、更灵活的
Proxy
所取代，同时其自身的设计复杂性也成为了负担。
使用ES6 Proxy实现深度监听与复杂对象变化的最佳实践
ES6 的
Proxy
对象无疑是现代 JavaScript 中处理对象变化监听的利器，尤其是在需要深度监听复杂对象时，它的能力简直是开挂。不过，要用好它，特别是实现“深度监听”，还是有些门道的。
基本原理回顾
Proxy
的核心在于它是一个占位符，你对代理对象执行的任何操作（读取属性、设置属性、调用方法等）都会被拦截，并转发到你定义的
handler
对象中的对应“陷阱”方法。
const handler = { get(target, property, receiver) { console.log(`Getting property "${String(property)}"`); return Reflect.get(target, property, receiver); }, set(target, property, value, receiver) { console.log(`Setting property "${String(property)}" to "${value}"`); return Reflect.set(target, property, value, receiver); }};let myObject = { a: 1 };let proxyObject = new Proxy(myObject, handler);proxyObject.a; // 输出: Getting property "a"proxyObject.a = 2; // 输出: Setting property "a" to "2"
实现深度监听的挑战与策略
Proxy
默认只能监听代理对象本身的直接属性操作。当对象内部嵌套了其他对象或数组时，直接修改这些嵌套对象的属性，
proxyObject
的
set
陷阱是不会被触发的。
let nestedData = { info: { name: 'Alice', age: 30 }, tags: ['js', 'dev']};let reactiveNestedData = new Proxy(nestedData, handler);reactiveNestedData.info.name = 'Bob'; // handler的set不会被触发！// 因为我们修改的是 info 对象内部的 name 属性，而不是 reactiveNestedData 对象的直接属性
要实现深度监听，核心策略是：在
get
陷阱中，当访问到嵌套的对象或数组时，也将其包装成
Proxy
。 这样，无论你访问多深层次的属性，都会经过
Proxy
的层层拦截。
function createDeepReactive(obj, callback) { const isObject = (val) => val && typeof val === 'object'; return new Proxy(obj, { get(target, property, receiver) { const res = Reflect.get(target, property, receiver); // 如果获取到的值是对象（且不是null），就递归地将其也包装成 Proxy if (isObject(res)) { return createDeepReactive(res, callback); } return res; }, set(target, property, value, receiver) { const oldValue = Reflect.get(target, property, receiver); // 避免重复设置相同的值 if (oldValue === value) { return true; } // 如果新值是对象，也需要包装成 Proxy const newValue = isObject(value) ? createDeepReactive(value, callback) : value; const result = Reflect.set(target, property, newValue, receiver); if (result) { callback({ type: 'update', property: property, oldValue: oldValue, newValue: newValue, target: target }); } return result; }, deleteProperty(target, property) { if (Reflect.has(target, property)) { const oldValue = Reflect.get(target, property); const result = Reflect.deleteProperty(target, property); if (result) { callback({ type: 'delete', property: property, oldValue: oldValue, target: target }); } return result; } return false; } });}let deepData = { user: { name: 'Charlie', address: { city: 'New York', zip: '10001' } }, items: [ { id: 1, name: 'Laptop' }, { id: 2, name: 'Mouse' } ]};let reactiveDeepData = createDeepReactive(deepData, (change) => { console.log('深度对象变化:', change);});reactiveDeepData.user.name = 'David'; // 触发回调// 输出: 深度对象变化: { type: 'update', property: 'name', oldValue: 'Charlie', newValue: 'David', target: { name: 'David', address: { city: 'New York', zip: '10001' } } }reactiveDeepData.user.address.city = 'Los Angeles'; // 触发回调// 输出: 深度对象变化: { type: 'update', property: 'city', oldValue: 'New York', newValue: 'Los Angeles', target: { city: 'Los Angeles', zip: '10001' } }reactiveDeepData.items.push({ id: 3, name: 'Keyboard' }); // 触发回调 (数组的push本质是修改length属性和添加新索引属性)// 输出: 深度对象变化: { type: 'update', property: '2', oldValue: undefined, newValue: { id: 3, name: 'Keyboard' }, target: [ { id: 1, name: 'Laptop' }, { id: 2, name: 'Mouse' }, { id: 3, name: 'Keyboard' } ] }// 输出: 深度对象变化: { type: 'update', property: 'length', oldValue: 2, newValue: 3, target: [ { id: 1, name: 'Laptop' }, { id: 2, name: 'Mouse' }, { id: 3, name: 'Keyboard' } ] }// 替换整个对象reactiveDeepData.user = { name: 'Eve', address: { city: 'London', zip: 'SW1A 0AA' } }; // 触发回调// 输出: 深度对象变化: { type: 'update', property: 'user', oldValue: { name: 'David', address: { city: 'Los Angeles', zip: '10001' } }, newValue: Proxy { ... }, target: { user: Proxy { ... }, items: Proxy { ... } } }
最佳实践与注意事项：
递归代理的性能考量： 深度监听意味着当数据结构非常庞大且嵌套很深时，每次
get
操作都可能创建一个新的
Proxy
，这会带来一定的性能开销和内存占用。在实际应用中，你可能需要权衡是否所有数据都需要深度响应，或者只对特定关键数据进行深度代理。避免循环引用： 递归创建
Proxy
时要小心循环引用的情况，虽然
Proxy
本身通常能处理，但在某些极端场景下可能会导致栈溢出或无限循环。
Reflect
的使用： 总是推荐使用
Reflect
对象来执行默认的对象操作（如
Reflect.get
,
Reflect.set
,
Reflect.deleteProperty
）。这不仅代码更清晰，也避免了
this
指向问题，并确保了操作的正确性。数组操作的特殊性： 数组是特殊的对象。像
push
,
pop
,
splice
等方法会修改数组的
length
属性和/或特定索引的属性。我们的
set
陷阱可以捕捉到这些变化。但如果你想监听数组的每一个方法调用，可能需要在
get
陷阱中对数组方法进行包装，或者直接拦截
apply
陷阱（如果你的
Proxy
是一个函数）。不过，通常
set
陷阱足以覆盖大部分需求。原始值的替换：
Proxy
只能代理对象。如果你直接替换一个属性为原始值（如
reactiveDeepData.user = null
），那
user
将不再是
Proxy
。但下次你再将
user
设置为一个对象时，它又会被重新代理。
this
上下文问题：
Proxy
在拦截方法调用时，
this
的指向可能会成为一个坑。如果方法内部使用了
this
，并且
this
期望指向原始对象，那么在
get
陷阱中返回方法时，需要使用
Reflect.apply
或
bind
来确保
this
的正确性。不过，对于简单的属性监听，这通常不是问题。应用场景：
Proxy
在状态管理库（如 Vue 3 的响应式系统）、ORM 框架、数据校验、日志记录、访问控制等领域都有非常强大的应用。理解并掌握它，能让你在这些领域如鱼得水。
除了Proxy，还有哪些不那么“现代”但依然实用的对象变化追踪策略？
虽然
Proxy
是目前最强大、最推荐的解决方案，但并非所有场景都适合或者需要
Proxy
。在一些老旧项目、对浏览器兼容性有更高要求、或者仅仅是需要追踪少量属性变化的场景下，一些“不那么现代”但依然实用的策略仍然有其价值。
1.
Object.defineProperty
的 Getter/Setter 机制
这个我们前面已经提到了，它
以上就是如何利用JavaScript的Object.observe监听对象变化，以及它被废弃后的替代方案有哪些？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521636.html
微信扫一扫 
支付宝扫一扫 
