JavaScript代理与反射API高级用法

const target = { name: 'Alice' };
const readOnly = new Proxy(target, {
  set() {
    throw new Error("Cannot modify a read-only object");
  },
  deleteProperty() {
    throw new Error("Cannot delete property");
  }
});

const reactive = new Proxy(target, {
  get(target, key, receiver) {
    console.log(`GET ${String(key)}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`SET ${String(key)} = ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
});

const subscribers = new Set();

function track() {
  // 模拟依赖收集
  const effect = activeEffect;
  if (effect) {
    subscribers.add(effect);
  }
}

function trigger() {
  // 触发所有副作用函数
  subscribers.forEach(effect => effect());
}

const reactive = (obj) => {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track();
      return typeof result === 'object' ? reactive(result) : result;
    },
    set(target, key, value, receiver) {
      const oldVal = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldVal !== value) {
        trigger();
      }
      return result;
    }
  });
};

class UserService {
  getUser(id) {
    return { id, name: 'Bob' };
  }
  saveUser(user) {
    // 模拟保存
  }
}

const service = new UserService();
const loggedService = new Proxy(service, {
  get(target, key, receiver) {
    const prop = Reflect.get(target, key, receiver);
    if (typeof prop === 'function') {
      return function(...args) {
        console.log(`Calling method: ${key} with`, args);
        const result = Reflect.apply(prop, target, args);
        console.log(`Method ${key} returned`, result);
        return result;
      };
    }
    return prop;
  }
});