Proxy响应式代码实现

Proxy是JavaScript中的一个内置对象，它可以用来创建一个代理对象，用于拦截并自定义对目标对象的操作。通过Proxy可以实现响应式的数据绑定。

下面是一个简单的示例代码，展示了如何使用Proxy实现响应式的数据绑定：

function createReactiveObject(obj, onChange) {
  return new Proxy(obj, {
    get(target, key) {
      // 当获取属性值时触发
      console.log(`Getting ${key}`);
      return target[key];
    },
    set(target, key, value) {
      // 当设置属性值时触发
      console.log(`Setting ${key} to ${value}`);
      target[key] = value;
      // 触发onChange回调函数
      onChange();
      return true;
    },
    deleteProperty(target, key) {
      // 当删除属性时触发
      console.log(`Deleting ${key}`);
      delete target[key];
      // 触发onChange回调函数
      onChange();
      return true;
    }
  });
}

// 创建一个空对象，并使用Proxy进行代理
const reactiveObj = createReactiveObject({}, () => {
  console.log('Data changed!');
});

// 对代理对象进行操作
reactiveObj.name = 'John'; // 设置属性值
console.log(reactiveObj.name); // 获取属性值
delete reactiveObj.name; // 删除属性

在上述代码中，`createReactiveObject`函数用于创建一个代理对象。当代理对象的属性被获取、设置或删除时，会触发相应的Proxy拦截方法，并执行相应的操作。在这个示例中，我们只是简单地打印了一些日志，并在属性设置和删除时调用了`onChange`回调函数。

这只是一个简单的示例，实际应用中可以根据具体需求进行更复杂的操作和逻辑。使用Proxy可以方便地实现响应式的数据绑定，用于构建诸如Vue.js等框架的数据驱动功能。