如何使用javascript原生方法，监听对象属性变化

前端李易安

于 2024-09-30 18:30:00 发布

阅读量512

点赞数 5

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/misstianyun/article/details/134726183

版权

javascript 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

如果用javascript原生方法监听对象属性的变化，需要用到Proxy对象和Reflect对象，下面我们先来了解一下这两个对象。

Proxy 对象是 ES6 中引入的一个强大的特性，它允许你创建一个对象的代理，从而可以拦截和自定义对象的基本操作，如属性访问、赋值、枚举、函数调用等。Proxy 对象可以用于多种场景，包括但不限于：

属性访问控制：可以控制对对象属性的读写访问，进行数据校验或者执行额外的逻辑。
数据绑定与对象校验：用于实现双向绑定，以及在设置属性值时进行数据校验。
访问控制和权限管理：可以控制对某些敏感属性的访问，或者根据权限来限制对对象的操作。
观察者模式：当对象的属性发生变化时，可以通知观察者或者执行回调函数。
性能优化：可以实现懒加载或虚拟化技术，例如只有当属性被访问时才从服务器加载数据。
API 模拟和测试：可以创建一个 API 的代理，用于模拟后端服务，方便前端开发和测试。
函数和构造函数拦截：可以拦截函数调用或者构造函数的实例化过程，改变函数的行为或者实例化过程。
操作转发：可以将对代理对象的操作转发到另一个对象，实现操作的委托。
撤销代理：Proxy.revocable() 方法可以创建一个可撤销的代理对象，允许在某个时刻禁止任何对代理对象的操作。

下面是一个简单的 Proxy 使用示例，演示了如何创建一个代理来监听对象属性的变化：

const target = {
  name: 'target'
};

const handler = {
  get(target, prop, receiver) {
    console.log(`get ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`set ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};

const proxy = new Proxy(target, handler);

proxy.name; // 控制台输出: get name
proxy.name = 'proxy'; // 控制台输出: set name to proxy

在这个例子中，我们创建了一个代理来拦截对 target 对象的 get 和 set 操作。每当对象的属性被访问或修改时，控制台都会输出相应的信息。

Proxy 是一个非常强大的工具，但也需要注意以下几点：

不是所有的对象操作都可以被 Proxy 拦截，例如修改原型链就不能被拦截。
Proxy 对象对性能有一定影响，因此在性能敏感的场景下应谨慎使用。
由于 Proxy 可以改变对象的基本行为，因此在调试时可能会引入额外的复杂性。

在 ES6 之前的 JavaScript 中，监听对象属性变化的原生方法是比较有限的。但是，从 ES6 开始，我们可以使用 Proxy 对象来实现这一功能。Proxy 允许你定义一个对象的各种操作的自定义行为（例如属性查找、赋值、枚举、函数调用等）。

下面是一个使用 Proxy 来监听对象属性变化的基本例子：

function onChange(object, onChangeCallback) {
  const handler = {
    get(target, property, receiver) {
      try {
        return new Proxy(target[property], handler);
      } catch (err) {
        return Reflect.get(target, property, receiver);
      }
    },
    defineProperty(target, property, descriptor) {
      onChangeCallback();
      return Reflect.defineProperty(target, property, descriptor);
    },
    deleteProperty(target, property) {
      onChangeCallback();
      return Reflect.deleteProperty(target, property);
    }
  };

  return new Proxy(object, handler);
}

// 使用方法
const obj = { a: 1 };
const watchedObj = onChange(obj, () => {
  console.log('对象发生了变化');
});

watchedObj.a = 2; // 控制台输出: 对象发生了变化
delete watchedObj.a; // 控制台输出: 对象发生了变化
watchedObj.b = 3; // 控制台输出: 对象发生了变化