通过 Proxy 的 get 陷阱拦截数组变异方法，可捕获 push、pop 等操作，在执行前后添加自定义逻辑；由于数组方法直接修改内部属性，无法仅靠 set 拦截 length 变化，必须包装方法调用以实现响应式更新。
JavaScript 的代理模式通过 Proxy 对象可以拦截对数组的操作，包括数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse）。这些方法会直接修改原数组，而使用 Proxy 可以在这些操作发生时进行拦截和响应。
如何用 Proxy 拦截数组变异方法？
要拦截数组的变异方法，需要创建一个代理对象，在 handler 中定义 get 陷阱来捕获对数组方法的访问。当访问如 arr.push 时，你可以返回一个包装后的函数，在调用前执行自定义逻辑。
示例代码：
const originalArray = []; const handler = { get(target, prop, receiver) { // 如果访问的是变异方法，返回包装后的版本 if (['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].includes(prop)) { return function(...args) { console.log(`调用数组方法: ${prop}，参数:`, args); // 执行原始方法 const result = target[prop].apply(target, args); // 可以在这里触发更新或通知 console.log('数组已变更:', target); return result; }; } // 其他属性正常访问 return Reflect.get(target, prop, receiver); } }; const proxyArray = new Proxy(originalArray, handler); proxyArray.push(1); // 输出：调用数组方法: push... 数组已变更: [1] proxyArray.push(2); proxyArray.pop(); // 输出：调用数组方法: pop...为什么不能直接监听 length 变化？
数组的变异方法会自动更新 length 属性，但 Proxy 的 set 陷阱不会被这些方法触发，因为它们是直接调用内部实现的。所以你无法仅靠 set 来感知所有变化，必须通过拦截方法调用来实现。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
例如，push 会同时修改元素和 length，但这些都不是通过 setter 触发的赋值操作。因此只监听 set 会漏掉很多情况。
实际应用中的注意事项
在框架（如 Vue 3）中，正是利用了这种机制来实现响应式数组。但要注意以下几点：
- 代理只能拦截对象本身的方法调用，不能监听原型链上的行为，所以必须确保方法是从代理对象上访问的
- 某些方法如 concat、slice 不会改变原数组，不需要特别处理
- 需要考虑性能，避免在高频操作中做过多额外计算
- 注意 this 上下文，包装方法时要用 apply 或 call 正确绑定目标数组
