JavaScript中监听类数组属性变动并执行额外任务：使用Proxy的进阶指南-js教程-PHP中文网

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

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

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

在JavaScript中，我们经常需要在类的实例属性发生变化时执行一些额外的逻辑，例如将数据同步到 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. 引入解决方案：JavaScript Proxy

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

立即学习“Java免费学习笔记（深入）”；

Proxy 的基本语法如下：

const proxy = new Proxy(target, handler);

登录后复制

target: 被 Proxy 包装的原始对象。
handler: 一个对象，其中包含用于定义 Proxy 行为的陷阱方法。

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

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

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

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

以下是使用 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
    });
  }
}

登录后复制

代码解析：

crumbList 内部数组： 我们在 constructor 中初始化一个名为 crumbList 的私有数组，它将作为 Proxy 的目标对象，实际存储数据。它的初始值会尝试从 sessionStorage 中加载，如果不存在则为空数组。
this.crumbs = new Proxy(crumbList, { ... })： 将 this.crumbs 属性设置为一个 Proxy 对象，它包装了 crumbList。所有对 this.crumbs 的操作都会首先通过这个 Proxy。
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)) 来同步数据。
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，我们成功地克服了JavaScript传统 getter/setter 在监听数组内部变动时的局限性，提供了一种强大且灵活的机制，使得在数组属性发生任何结构性变化时都能执行自定义的额外任务，极大地增强了数据响应式和副作用管理的能力。

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