Proxy：JavaScript中的'变形金刚'，让你的对象为所欲为！

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个写了6年前端的老司机。今天要聊一个ES6里超有意思的特性------Proxy。这玩意儿就像给你的JavaScript对象装上了"监听器"和"变形器"，能拦截对象的各种操作，实现一些以前想都不敢想的黑魔法！

还记得我第一次看到Proxy时的反应："卧槽，这简直就是在写外挂啊！" 今天我就带大家彻底搞懂这个"对象操纵大师"，保准让你直呼过瘾！

一、Proxy是什么？对象的'替身使者'

简单说，Proxy可以给对象设置一个代理，拦截并自定义基本操作（比如属性查找、赋值、枚举等）。

javascript 复制代码

const target = { name: '小明' };
const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : '查无此属性';
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // "小明"
console.log(proxy.age);  // "查无此属性" （原本应该是undefined）

翻译成人话：Proxy就像给你的对象请了个"秘书"，所有找这个对象的操作都要先经过秘书处理！

二、Proxy能做什么？5个让你惊掉下巴的用法

1. 自动补全属性（防undefined报错）

javascript 复制代码

const safeObj = new Proxy({}, {
  get(target, prop) {
    return target[prop] ?? `属性${prop}不存在`;
  }
});

console.log(safeObj.aaa); // "属性aaa不存在"

2. 数据验证（再也不怕乱赋值）

javascript 复制代码

const validatedUser = new Proxy({ age: 25 }, {
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new Error('年龄必须是数字！');
    }
    target[prop] = value;
    return true; // 表示设置成功
  }
});

validatedUser.age = 30; // OK
validatedUser.age = "三十"; // 报错！

3. 私有属性（#还没出来时的替代方案）

javascript 复制代码

const createPrivateObj = () => {
  const _private = { secret: 123 };
  return new Proxy({}, {
    get(_, prop) {
      if (prop.startsWith('_')) {
        throw new Error('禁止访问私有属性！');
      }
      return _private[prop];
    }
  });
};

const obj = createPrivateObj();
console.log(obj.secret); // 123
console.log(obj._secret); // 报错！

4. 数组负索引（Python既视感）

javascript 复制代码

const negativeArray = arr => new Proxy(arr, {
  get(target, prop) {
    const index = parseInt(prop);
    return target[index < 0 ? target.length + index : index];
  }
});

const arr = negativeArray(['a', 'b', 'c']);
console.log(arr[-1]); // "c" （倒数第一个）

5. 方法链式调用（jQuery风格）

javascript 复制代码

const chainable = obj => {
  const handler = {
    get(target, prop) {
      return (...args) => {
        target[prop](...args);
        return new Proxy(target, handler); // 返回新代理
      };
    }
  };
  return new Proxy(obj, handler);
};

const api = chainable({
  login() { console.log('登录'); },
  fetch() { console.log('获取数据'); }
});

api.login().fetch(); // 链式调用！

三、Proxy的13种拦截操作（超全表格）

拦截操作	触发场景	典型用途
get	读取属性	属性校验、日志记录
set	设置属性	数据验证、自动触发UI更新
has	`in`操作符	隐藏私有属性
deleteProperty	`delete`操作	防止误删重要属性
apply	函数调用	函数调用劫持（高阶函数）
construct	`new`操作	单例模式
...（共13种）	...	...

我在实现一个状态管理库时，用Proxy的set拦截自动触发了Vue的响应式更新，代码量直接减少40%！

四、Proxy vs Object.defineProperty

Vue2用的defineProperty和Vue3用的Proxy有什么区别？

特性	defineProperty	Proxy
拦截操作数量	只能拦截get/set	13种操作全拦截
数组支持	需要hack处理	原生支持
性能	稍快	稍慢但可接受
兼容性	IE9+	IE全跪

结论：现代项目无脑选Proxy就对了！

五、真实案例：我用Proxy做的三个骚操作

案例1：API Mock工具

javascript 复制代码

// 创建一个永远返回200的假fetch
const mockFetch = new Proxy(window.fetch, {
  apply(target, thisArg, args) {
    return Promise.resolve({
      ok: true,
      json: () => Promise.resolve({ code: 200 })
    });
  }
});

// 测试时替换全局fetch
window.fetch = mockFetch;

案例2：自动化埋点

javascript 复制代码

// 给所有按钮点击自动埋点
document.body = new Proxy(document.body, {
  get(target, prop) {
    const el = target[prop];
    if (el instanceof HTMLElement && el.tagName === 'BUTTON') {
      el.addEventListener('click', () => {
        console.log(`点击了${el.textContent}`);
      });
    }
    return el;
  }
});

案例3：性能监控

javascript 复制代码

// 监控函数执行时间
const timedFunction = fn => new Proxy(fn, {
  apply(target, thisArg, args) {
    const start = performance.now();
    const result = target.apply(thisArg, args);
    console.log(`耗时：${performance.now() - start}ms`);
    return result;
  }
});

const heavyTask = timedFunction(() => {
  for(let i=0; i<1000000; i++) Math.random();
});

heavyTask(); // 控制台输出执行时间

六、注意事项（踩坑预警）

性能敏感场景慎用（比如每秒执行数万次的操作）
不要代理不可扩展对象 （如Math、window）
递归代理要小心循环引用
记得撤销代理 （用Proxy.revocable()）

javascript 复制代码

const {proxy, revoke} = Proxy.revocable({}, {});
revoke(); // 之后proxy就废了

总结：Proxy在手，对象我有

✅ 拦截操作随心所欲
✅ 实现模式无限可能
✅ 现代前端开发必备技能

你们用Proxy实现过什么有趣的功能？有没有遇到过什么坑？欢迎在评论区分享！

我是小杨，下期可能会讲《用Proxy实现一个迷你Vue3》，感兴趣的话点个关注不迷路！ 🚀