简述JS 监听对象属性的改变 ？

在JavaScript中，我们可以使用 Object.defineProperty() 方法来监听对象属性的改变。这个方法可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

为了监听属性的改变，我们需要使用 Object.defineProperty() 的第三个参数，这是一个描述符对象，它可以有以下几种属性：

• configurable：如果为 true，属性的类型可以在某些情况下被改变，属性也可以从对应的对象中被删除。默认为 false。
• enumerable：如果为 true，属性会在 for...in 循环和 Object.keys() 方法返回的属性列表中显示。默认为 false。
• value：包含这个属性的数据值。默认为 undefined。
• writable：如果为 true，属性的值可以被改变。默认为 false。
• get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（属性所在的对象）。
• set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，会调用此函数。这个方法接受唯一参数，即该属性新的参数值。

要监听属性的改变，我们需要在 set 函数中添加我们的监听逻辑。例如：

let obj = {};

Object.defineProperty(obj, 'myProperty', {
  get: function() {
    return this._myProperty;
  },
  set: function(value) {
    console.log('myProperty 的值已经被改变为: ' + value);
    this._myProperty = value;
  }
});

obj.myProperty = 'Hello, world!';  // 输出: myProperty 的值已经被改变为: Hello, world!

在这个例子中，每当 myProperty 的值被改变时，我们就会在控制台中打印出新的值。

需要注意的是，Object.defineProperty() 只会影响被添加或修改的属性。如果你想监听对象所有属性的改变，你可能需要递归地遍历对象的所有属性并应用 Object.defineProperty()，或者使用 Proxy 对象。

Proxy 对象在 ES6 中被引入，它提供了一种方式来定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。使用 Proxy 对象可以很方便地监听对象属性的改变：

let obj = {
  myProperty: 'Hello'
};

let proxyObj = new Proxy(obj, {
  set: function(target, prop, value) {
    console.log(`${prop} 的值已经被改变为: ${value}`);
    target[prop] = value;
    return true;
  }
});

proxyObj.myProperty = 'World';  // 输出: myProperty 的值已经被改变为: World

在这个例子中，每当 proxyObj 的任何属性的值被改变时，我们都会在控制台中打印出新的值。