运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

J*aScript中监听类数组属性变动并执行额外任务：使用Proxy的进阶指南

javascript中监听类数组属性变动并执行额外任务：使用proxy的进阶指南

当J*aScript类中的数组属性通过push、pop等方法发生变动时，传统的set访问器无法触发。本文将深入探讨这一问题，并提供一个基于Proxy对象的优雅解决方案，通过拦截数组的length属性变化，实现对数组所有变动（包括修改、添加、删除元素）的精确监听，从而在数组状态改变时执行如sessionStorage更新等额外任务。

1. 问题背景与传统方法的局限性

在J*aScript中，我们经常需要在类的实例属性发生变化时执行一些额外的逻辑，例如将数据同步到 sessionStorage 或触发UI更新。对于基本类型或对象属性的直接赋值，set 访问器（setter）能够很好地完成这个任务。然而，当属性是一个数组，并且我们通过数组的变异方法（如 push()、pop()、splice() 等）来修改其内容时，set 访问器并不会被触发。

考虑以下示例代码，它尝试在 Crumbs 数组属性变动时更新 sessionStorage：

class Environment {
  constructor() {
    this.Crumbs = [];
  }
  set Crumbs(value) {
    // 预期在此处更新 sessionStorage，但数组变异方法不会触发它
    sessionStorage.setItem('_crumbs', JSON.stringify(value));
  }
  get Crumbs() {
    let result = [];
    if (sessionStorage.getItem('_crumbs') !== null) {
      result = JSON.parse(sessionStorage.getItem('_crumbs'));
    } else {
      sessionStorage.setItem('_crumbs', JSON.stringify([]));
    }
    return result;
  }           
}

let env = new Environment();
let _crumb = { MetricId: 6, Concept: 'Back orders' };

// 期望这里能触发 set Crumbs，但实际上不会
env.Crumbs.push(_crumb); 
console.log("Crumbs after push:", env.Crumbs); // 数组内容已变，但sessionStorage未更新
console.log("sessionStorage content:", sessionStorage.getItem('_crumbs')); // 仍然是空数组或旧值

上述代码中，env.Crumbs.push(_crumb) 操作直接修改了 this.Crumbs 所引用的数组对象，但并未改变 this.Crumbs 这个属性本身的引用。set Crumbs(value) 只有在 this.Crumbs = someNewArray 这种直接赋值操作发生时才会被调用。因此，传统的 getter/setter 机制无法满足我们监听数组内部变动的需求。

2. 引入解决方案：J*aScript Proxy

为了解决传统 getter/setter 的局限性，我们可以利用ES6引入的 Proxy 对象。Proxy 允许我们拦截对目标对象（包括数组）的各种操作，例如属性查找、赋值、函数调用等。通过在 Proxy 的 handler 中定义特定的“陷阱”（trap），我们可以在这些操作发生时执行自定义逻辑。

Proxy 的基本语法如下：

const proxy = new Proxy(target, handler);
  • target: 被 Proxy 包装的原始对象。
  • handler: 一个对象，其中包含用于定义 Proxy 行为的陷阱方法。

在本场景中，我们将利用 Proxy 的 set 陷阱来拦截对数组属性的赋值操作，尤其是对数组 length 属性的修改。

3. 使用Proxy实现数组变动监听

解决问题的核心思路是：数组的许多变异方法（如 push、pop、shift、unshift、splice）以及直接修改 length 属性，都会导致数组的 length 属性发生变化。因此，我们可以通过监听 Proxy 对象上 length 属性的变化，来间接捕获数组的绝大部分结构性变动。

YouMind YouMind

AI内容创作和信息整理平台

YouMind 207 查看详情 YouMind

以下是使用 Proxy 改进 Environment 类的实现：

class Environment {
  constructor() {
    // 1. 初始化内部数组：从 sessionStorage 加载或创建空数组
    // crumbList 将是 Proxy 的目标对象，存储实际数据
    const crumbList =
      JSON.parse(sessionStorage.getItem('crumbs') ?? null) ?? [];

    // 2. 创建 Proxy 对象并赋值给公开属性 this.crumbs
    this.crumbs = new Proxy(crumbList, {
      set(obj, prop, value, receiver) {
        // obj: 目标对象 (crumbList)
        // prop: 被设置的属性名
        // value: 属性的新值
        // receiver: Proxy 实例本身

        // 首先，执行默认的属性设置操作
        const result = Reflect.set(obj, prop, value, receiver);

        // 3. 检查是否是 length 属性的变动
        if (prop === 'length') {
          // 如果是 length 属性变动，说明数组结构已改变，执行额外任务
          sessionStorage.setItem('crumbs', JSON.stringify(crumbList));
        }
        return result; // 必须返回 true 表示设置成功
      }
    });

    // 4. 重写 valueOf 方法：
    // 当需要获取数组的原始值或副本时（例如 JSON.stringify），
    // 返回 crumbList 的浅拷贝，而不是 Proxy 对象本身。
    // 这有助于确保在需要时能获取到数组的实际内容。
    Object.defineProperty(this.crumbs, 'valueOf', {
      value: function valueOf() {
        return [...crumbList];
      },
      writable: true,
      configurable: true
    });
  }
}

代码解析：

  1. crumbList 内部数组： 我们在 constructor 中初始化一个名为 crumbList 的私有数组，它将作为 Proxy 的目标对象，实际存储数据。它的初始值会尝试从 sessionStorage 中加载，如果不存在则为空数组。
  2. this.crumbs = new Proxy(crumbList, { ... })： 将 this.crumbs 属性设置为一个 Proxy 对象，它包装了 crumbList。所有对 this.crumbs 的操作都会首先通过这个 Proxy。
  3. set 陷阱：
    • 当对 this.crumbs（即 Proxy）的任何属性进行赋值时，set 陷阱会被触发。
    • Reflect.set(obj, prop, value, receiver)：这是最佳实践，用于执行底层的属性设置操作，确保行为与直接操作目标对象一致。
    • if (prop === 'length'): 这是关键。当数组通过 push、pop、splice 等方法修改时，或者直接赋值 arr.length = X 时，length 属性会发生变化。我们捕获这一变化，并在此处执行 sessionStorage.setItem('crumbs', JSON.stringify(crumbList)) 来同步数据。
  4. valueOf 方法重写： Object.defineProperty(this.crumbs, 'valueOf', ...) 允许我们为 Proxy 对象定义一个 valueOf 方法。当 Proxy 对象被隐式或显式地转换为原始值时（例如，当使用 JSON.stringify(env.crumbs) 时），valueOf 方法会被调用。我们让它返回 crumbList 的一个浅拷贝，确保获取到的是实际的数组内容，而不是 Proxy 对象本身。

4. 完整示例与操作演示

下面是包含 Proxy 解决方案的完整代码，以及演示各种数组操作如何触发 sessionStorage 更新的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy Array Mutation Demo</title>
</head>
<body>
    <h1>Proxy Array Mutation Demo</h1>
    <p>请打开开发者工具的控制台查看输出。</p>

    <script>
        // 为了在Stack Snippet或本地模拟 sessionStorage，这里提供一个简单的内存实现
        // 在实际浏览器环境中，可以直接使用全局的 sessionStorage 对象
        const sessionStorage = (function () {
            const storageMap = new Map();

            return {
                get length() { return storageMap.size; },
                key(index) {
                    const keys = [...storageMap.keys()];
                    return keys[index];
                },
                getItem(key) { return storageMap.get(String(key)); },
                setItem(key, value) { return storageMap.set(String(key), String(value)); },
                removeItem(key) { return storageMap.delete(String(key)); },
                clear() { return storageMap.clear(); }
            };
        })();

        class Environment {
            constructor() {
                // 从 sessionStorage 初始化或作为空数组
                const crumbList =
                    JSON.parse(sessionStorage.getItem('crumbs') ?? null) ?? [];

                this.crumbs = new Proxy(crumbList, {
                    set(obj, prop, value, receiver) {
                        const result = Reflect.set(obj, prop, value, receiver);

                        if (prop === 'length') {
                            // 数组结构变动时，立即更新 sessionStorage
                            sessionStorage.setItem('crumbs', JSON.stringify(crumbList));
                            console.log(`[Proxy Set Trap] 'length' changed to ${value}. sessionStorage updated.`);
                        }
                        return result;
                    }
                });

                // 重写 valueOf 方法以返回数组的实际内容副本
                Object.defineProperty(this.crumbs, 'valueOf', {
                    value: function valueOf() {
                        return [...crumbList];
                    },
                    writable: true,
                    configurable: true
                });
            }
        }

        const env = new Environment();

        const metricId = 6;
        const concept = 'Back orders';
        const crumb = { metricId, concept };

        console.log("--- Initial State ---");
        console.log("env.crumbs:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        console.log("\n--- Performing array mutations ---");

        // 1. push 操作
        env.crumbs.push(crumb);
        env.crumbs.push('foo');
        env.crumbs.push('bar');
        console.log("After push operations:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        // 2. 直接修改 length 属性
        console.log("\nSetting env.crumbs.length = 5;");
        env.crumbs.length = 5; // 如果当前长度小于5，会填充 undefined；如果大于5，会截断
        console.log("After setting length to 5:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        env.crumbs.push('baz');
        env.crumbs.push('biz');
        console.log("After more pushes:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        // 3. shift 和 pop 操作
        console.log("\nPerforming shift and pop operations...");
        env.crumbs.shift(); // 移除第一个元素
        env.crumbs.pop();  // 移除最后一个元素
        env.crumbs.pop();  // 再次移除最后一个元素
        console.log("After shift and pop:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        // 4. splice 操作
        console.log("\nPerforming splice operation...");
        env.crumbs.splice(1, 1, 'new_item_1', 'new_item_2'); // 从索引1开始删除1个元素，并插入两个新元素
        console.log("After splice:", env.crumbs.valueOf());
        console.log("sessionStorage:", sessionStorage.getItem('crumbs'));

        console.log("\n--- Final State ---");
        console.log("Final env.crumbs.valueOf():", env.crumbs.valueOf());
        console.log("Final sessionStorage content:", sessionStorage.getItem('crumbs'));
    </script>
</body>
</html>

在上述代码中，每次 push、shift、pop、splice 操作，以及直接修改 env.crumbs.length，都会触发 Proxy 的 set 陷阱中对 length 属性的检查，进而更新 sessionStorage。通过控制台输出，我们可以清晰地看到 sessionStorage 始终与 env.crumbs 的实际内容保持同步。

5. 注意事项与总结

  • 适用场景： 这种 Proxy 解决方案非常适合需要对数组属性的 任何 结构性变动（添加、删除、重新排序元素）做出响应的场景，例如数据持久化、UI响应式更新等。
  • 性能考量： Proxy 引入了一层拦截，可能会带来轻微的性能开销。对于大多数Web应用和常见数组规模，这种开销通常可以忽略不计。但在极端高性能要求的场景下，可能需要进行基准测试。
  • 深层监听： 本文的解决方案主要监听数组结构本身的变动以及对现有元素的直接替换。如果数组中存储的是对象，并且需要监听这些 对象内部属性 的变动，那么需要更复杂的实现，例如对数组中的每个对象也进行 Proxy 包装，形成一个“深层代理”。
  • valueOf 的作用： 重写 valueOf 方法是为了在需要数组的原始值或副本时（例如 JSON.stringify() 或某些库函数）能够正确获取到 crumbList 的内容，而不是 Proxy 对象本身。
  • 浏览器兼容性： Proxy 是ES6（ECMAScript 2015）引入的特性，现代主流浏览器（Chrome, Firefox, Edge, Safari）均已良好支持。如果需要支持旧版浏览器，可能需要使用 Polyfill 或其他替代方案（如遍历数组方法进行手动包装，但这会复杂得多）。

通过 Proxy，我们成功地克服了J*aScript传统 getter/setter 在监听数组内部变动时的局限性，提供了一种强大且灵活的机制，使得在数组属性发生任何结构性变化时都能执行自定义的额外任务，极大地增强了数据响应式和副作用管理的能力。

以上就是J*aScript中监听类数组属性变动并执行额外任务：使用Proxy的进阶指南的详细内容，更多请关注其它相关文章！


# 这是  # 网站优化关键词排名如何有效提升  # 校花衣服搜索关键词排名  # 合肥网站运营推广  # 手机网站优化收费低  # 宁波做公司网站建设  # 考试吧网站建设素材  # 百度关键词排名系统收录  # 承德网站优化软件开发  # 济源关键词排名工具  # 萝岗厂家搜索SEO  # 自定义  # 而不是  # 移除  # 这一  # 有什么  # javascript  # 的是  # 我们可以  # 重写  # 进阶  # safari  # session  # 工具  # edge  # 浏览器  # json  # js  # html  # java  # es6 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： 六级准考证号怎么查_四六级准考证查询入口官网  Highcharts雷达图径向轴数值标签实现教程  作业帮网页版不用下载入口 在线问老师快速答疑  嘴唇干裂起皮怎么办 唇部护理与预防干裂的方法【详解】  windows10怎么关闭自动安装应用_windows10禁止推广应用下载  电脑从睡眠中被自动唤醒怎么办_Windows唤醒源事件查看与禁用【解决】  QQ网页版官方账号登录入口 QQ网页版网页版入口快速导航  mysql怎么导入sql文件_mysql导入sql文件的方法与技巧  拷贝漫画2025网页版入口 拷贝漫画官网免费看全集  圆通快递官方入口不需要登录 在线查询入口快速查询  win11如何诊断DirectX问题 Win11运行dxdiag工具排查显卡故障【排错】  CDR如何复制交互式填充色  花生壳内网映射新方案  如何使用 Optional 类型并满足 Pylint 的类型检查  荣耀Magic7拍照夜景噪点处理_荣耀Magic7相机优化  《腾讯相册管家》注销账号方法  教育查询官方网站入口 教育个人档案查询免费官网  126邮箱申请入口官网_126邮箱注册免费登录2025  Mac如何开启画中画模式_Mac Safari浏览器视频画中画功能  手机雨课堂网页版入口免登录 雨课堂网页版可点击直接进入  b站如何管理订阅_b站订阅标签分类管理  发博客与长微博技巧  德邦快递会员怎么开通  J*aScript实现网页表单实时输入字段比较与验证教程  性能与资源监视器快捷打开  如何在CSS中使用伪类:valid实现表单验证提示_结合:valid改变边框颜色  苹果自助维修计划支持哪些设备机型  Magento 2 产品保存事件中安全更新属性的最佳实践  悟空浏览器如何恢复关闭的标签页 悟空浏览器撤销关闭网页快捷键设置  英雄联盟争者留名活动介绍  狙击外星人小游戏在线链接_狙击外星人小游戏网页链接  FotoBalloon图片左右镜像教程  《火影忍者：木叶高手》快速升级攻略  PHP魔术方法__set与__isset：设计考量、性能权衡与静态分析的视角  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  《东方财富》条件单关闭方法  京东快递物流信息不更新怎么办_物流停滞原因与处理方法  路由器DNS怎么设置最快 优化DNS提升上网速度教程  TikTok搜索结果不显示怎么办 TikTok搜索刷新与优化方法  c++如何实现一个简单的RPC框架_c++远程过程调用原理与实践  《飞猪旅行》购买汽车票方法  向往的生活小游戏启动处_向往的生活小游戏立即启动  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  解决Windows上Composer PATH变量冲突导致的命令无法识别问题  海棠书屋官方在线书籍入口 海棠书屋文学作品浏览官网链接  C++ optional用法详解_C++17处理可能为空的返回值  如何在CSS中设置背景图像：一个全面指南  《小黑盒》删除历史浏览方法  《火花chat》搜索好友方法  《海贝音乐》均衡器设置方法 

 2025-10-03

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.