JavaScript的代理模式如何拦截数组的变异方法？-js教程-PHP中文网

JavaScript的代理模式如何拦截数组的变异方法？

夢幻星辰

发布： 2025-10-07 23:36:01

原创

850人浏览过

通过 Proxy 的 get 陷阱拦截数组变异方法，可捕获 push、pop 等操作，在执行前后添加自定义逻辑；由于数组方法直接修改内部属性，无法仅靠 set 拦截 length 变化，必须包装方法调用以实现响应式更新。

javascript的代理模式如何拦截数组的变异方法？

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外挂函数库的强大功能，对常用的、强大的包