如何利用JavaScript的Object.observe监听对象变化，以及它被废弃后的替代方案有哪些？-js教程-PHP中文网

Object.observe因设计复杂、性能问题及Proxy的出现被废弃，现主要通过Proxy实现对象监听，也可用Object.defineProperty或响应式框架替代。

如何利用javascript的object.observe监听对象变化，以及它被废弃后的替代方案有哪些？

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

登录后复制

旨在提供原生、高效的监听机制，但要在 JavaScript 引擎层面实现对所有对象、所有类型变化的细粒度追踪，并保证性能开销可控，这本身就是一项巨大的挑战。想象一下，一个对象可能被多个观察者监听，每次变化都需要遍历这些观察者并触发回调，这在大型应用中可能会形成不小的性能瓶颈。更重要的是，它的异步通知机制，虽然避免了同步修改导致的无限循环问题，但也引入了新的复杂性，比如如何处理短时间内多次修改的批处理、如何保证通知的顺序等，这些都需要引擎进行复杂的调度和优化。

其次，粒度与实用性的平衡。

Object.observe

登录后复制

提供了非常细致的变化类型（

add

登录后复制

、

update

登录后复制

、

delete

登录后复制

、

splice

登录后复制

、

setPrototype

登录后复制

、

reconfigure

登录后复制

），这在理论上很美好，但在实际开发中，开发者往往只需要知道“某个东西变了”，而不需要知道它具体是“被添加了”还是“被修改了”。这种过度的粒度，反而增加了开发者处理回调逻辑的负担，使得 API 显得有些笨重。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

再者，与新兴的

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 框架、数据校验、日志记录、访问控制等领域都有非常强大的应用。理解并掌握它，能让你在这些领域如鱼得水。