万变不离其宗，变相监听一个对象某个属性的变化并不难

2024-01-18 09:15:18

在我们的日常开发中，难免会遇到这样的需求：我们需要监听一个对象某个属性的变化，当这个属性变化时，我们希望能够及时地做出响应。

入门

对于这样的需求，我们可以使用Object.defineProperty()方法来实现。Object.defineProperty()方法可以为对象添加一个新的属性，或者修改现有属性的属性符。

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John Doe',
  configurable: true,
  enumerable: true,
  writable: true
});

通过Object.defineProperty()方法，我们可以为obj对象添加一个名为name的新属性，并指定该属性的值为John Doe。同时，我们还可以指定该属性的属性符，包括configurable、enumerable和writable三个属性。

configurable：该属性表示是否可以修改该属性的属性描述符。如果该属性为false，则不能修改该属性的属性描述符。
enumerable：该属性表示该属性是否可以在for-in循环中被枚举。如果该属性为false，则该属性不会在for-in循环中被枚举。
writable：该属性表示该属性的值是否可以被修改。如果该属性为false，则该属性的值不能被修改。

在我们的例子中，我们将configurable、enumerable和writable三个属性都设置为true，这意味着我们可以修改name属性的属性描述符，name属性可以在for-in循环中被枚举，name属性的值可以被修改。

obj.name = 'Jane Doe';

通过这种方式，我们就可以监听obj对象name属性的变化。当name属性的值发生变化时，我们就可以及时地做出响应。

进阶

如果我们需要监听多个对象多个属性的变化，我们可以使用Proxy对象来实现。Proxy对象可以拦截对对象的访问和修改操作，并允许我们自定义这些操作的行为。

const handler = {
  get: function(target, property) {
    console.log(`Getting property ${property} from target ${target}`);
    return target[property];
  },
  set: function(target, property, value) {
    console.log(`Setting property ${property} on target ${target} to value ${value}`);
    target[property] = value;
  }
};

const obj = new Proxy({}, handler);
obj.name = 'John Doe';