通过 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 来感知所有变化，必须通过拦截方法调用来实现。
立即学习“Java免费学习笔记（深入）”；
例如，push 会同时修改元素和 length，但这些都不是通过 setter 触发的赋值操作。因此只监听 set 会漏掉很多情况。
实际应用中的注意事项
在框架（如 Vue 3）中，正是利用了这种机制来实现响应式数组。但要注意以下几点：
代理只能拦截对象本身的方法调用，不能监听原型链上的行为，所以必须确保方法是从代理对象上访问的 某些方法如 concat、slice 不会改变原数组，不需要特别处理 需要考虑性能，避免在高频操作中做过多额外计算 注意 this 上下文，包装方法时要用 apply 或 call 正确绑定目标数组基本上就这些。通过拦截数组方法，你可以精确掌握数组何时被修改，并做出相应反应。
以上就是JavaScript的代理模式如何拦截数组的变异方法？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527503.html
微信扫一扫 
支付宝扫一扫 
