JavaScript中的属性拦截与代理模式

描述
属性拦截是指在对象属性被读取、赋值或删除时，通过特定方法（如get、set、deleteProperty）执行自定义逻辑。JavaScript中主要通过Object.defineProperty和Proxy对象实现属性拦截。代理模式则基于拦截能力，提供对对象操作的细粒度控制，常用于数据绑定、校验、日志等场景。

解题过程

1. 基础拦截：Object.defineProperty

Object.defineProperty允许为对象的单个属性定义拦截行为，通过get和set描述符实现：

const obj = {};
let value = 0;

Object.defineProperty(obj, 'count', {
  get() {
    console.log('属性被读取');
    return value;
  },
  set(newValue) {
    console.log('属性被修改为', newValue);
    value = newValue;
  }
});

obj.count; // 输出"属性被读取"，返回0
obj.count = 5; // 输出"属性被修改为5"，value变为5

局限性：

• 需提前定义属性，无法拦截未声明的属性；
• 对数组的push、pop等方法无法直接拦截；
• 只能拦截单个属性，需遍历对象才能拦截所有属性。

2. 进阶拦截：Proxy对象

Proxy提供更全面的拦截能力，直接代理整个对象，支持拦截多种操作（如属性读取、赋值、删除、函数调用等）：

const target = { count: 0 };
const handler = {
  get(obj, prop) {
    console.log(`读取属性 ${prop}`);
    return obj[prop];
  },
  set(obj, prop, newValue) {
    console.log(`设置属性 ${prop} 为 ${newValue}`);
    obj[prop] = newValue;
    return true; // 必须返回布尔值表示成功
  },
  deleteProperty(obj, prop) {
    console.log(`删除属性 ${prop}`);
    delete obj[prop];
    return true;
  }
};

const proxy = new Proxy(target, handler);
proxy.count; // 输出"读取属性 count"
proxy.count = 10; // 输出"设置属性 count 为 10"
delete proxy.count; // 输出"删除属性 count"

优势：

• 无需提前定义属性，可拦截动态添加的属性；
• 支持拦截in、Object.keys()等操作；
• 可拦截数组方法或对象嵌套属性（需递归代理）。

3. 嵌套对象的深度代理

若需拦截嵌套对象的属性，需在get中返回子属性的代理：

const deepProxy = (target) => {
  const handler = {
    get(obj, prop) {
      const value = obj[prop];
      if (typeof value === 'object' && value !== null) {
        return new Proxy(value, handler); // 递归代理嵌套对象
      }
      return value;
    },
    set(obj, prop, newValue) {
      console.log(`设置 ${prop} 为`, newValue);
      obj[prop] = newValue;
      return true;
    }
  };
  return new Proxy(target, handler);
};

const data = deepProxy({ user: { name: 'Alice' } });
data.user.name = 'Bob'; // 输出"设置 name 为 Bob"

4. 应用场景举例

数据绑定与响应式系统：
通过拦截属性变更，自动更新UI：

const reactive = (obj, callback) => {
  return new Proxy(obj, {
    set(target, prop, value) {
      target[prop] = value;
      callback(prop, value); // 触发更新
      return true;
    }
  });
};

const state = reactive({ score: 0 }, (key, value) => {
  console.log(`UI更新：${key}变为${value}`);
});
state.score = 5; // 输出"UI更新：score变为5"

属性校验：
在set中验证赋值合法性：

const validator = {
  set(obj, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new Error('年龄必须为非负数字');
    }
    obj[prop] = value;
    return true;
  }
};
const person = new Proxy({}, validator);
person.age = 25; // 正常
person.age = -1; // 抛出错误

5. 注意事项

• 性能开销：代理会引入额外性能损耗，需在关键场景使用；
• 代理不可逆：无法从代理对象还原原始对象；
• this指向：被代理对象中的this可能指向代理后的对象，需谨慎处理。

总结
属性拦截从Object.defineProperty到Proxy的演进，提供了更灵活的对象操作控制能力。通过代理模式，开发者可以实现响应式数据、校验、日志等高级功能，但需权衡性能与复杂度。