JavaScript 中 Proxy 怎么通过代理模式自动记录对象属性的访问日志与埋点统计-js教程-PHP中文网

proxy可拦截get/set等操作实现无侵入日志与埋点：get中记录属性访问（过滤高频属性），set中统计关键字段变更（对比新旧值），支持组合拦截与分层策略，但需注意性能、递归代理及框架兼容性。

javascript 中 proxy 怎么通过代理模式自动记录对象属性的访问日志与埋点统计

JavaScript 中 Proxy 可以通过拦截对象的 get、set 等操作，在不修改原对象逻辑的前提下，自动记录属性访问行为，实现轻量级日志与埋点统计。

用 Proxy 拦截属性读取（get）并记录访问日志

每次读取属性时触发 get 拦截器，可记录时间、属性名、调用栈等上下文信息：

使用 Reflect.get(target, prop, receiver) 保证默认行为不被破坏
通过 console.trace() 或 new Error().stack 获取简单调用位置（生产环境建议采样或禁用）
避免高频属性（如 toString、valueOf）重复打点，可用白名单或正则过滤

示例：

const logAccess = (target, prefix = '') => new Proxy(target, {
  get(obj, prop) {
    if (typeof prop === 'string' && !/^__|constructor|toString|valueOf$/.test(prop)) {
      console.log(`[ACCESS] ${prefix || 'obj'}[${prop}] at`, new Date().toISOString());
    }
    return Reflect.get(obj, prop);
  }
});

拦截属性赋值（set）并统计变更行为

在 set 拦截中可判断是否为首次赋值、值是否变化、是否属于关键字段（如 userId、pageName），用于用户行为埋点：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

对比旧值与新值（注意引用类型需深比较或仅比对基本类型）
结合业务标识（如页面模块名）统一打点，便于后续归因分析
异步上报时建议节流或批量合并，避免阻塞主线程

示例：

const trackChanges = (target, module = 'unknown') => new Proxy(target, {
  set(obj, prop, value) {
    const oldValue = obj[prop];
    const changed = !Object.is(oldValue, value);
    if (changed && ['userId', 'status', 'tab'].includes(prop)) {
      console.log(`[CHANGE] ${module}.${prop}:`, oldValue, '→', value);
      // sendToAnalytics({ event: 'field_update', module, prop, oldValue, newValue: value });
    }
    return Reflect.set(obj, prop, value);
  }
});