1. 问题背景：set访问器的局限性
在JavaScript中，我们经常使用getter和setter来控制类属性的访问和修改。例如，我们可能希望在每次设置一个属性时执行一些副作用，比如持久化到sessionStorage。然而，当这个属性是一个数组时，直接对数组进行变异操作（如push、pop、splice等）并不会触发该属性的set访问器。
考虑以下示例代码：
class Environment {
constructor() {
this._crumbs = []; // 内部存储
}
set crumbs(value) {
// 只有在直接赋值时才会触发，如 env.crumbs = [...]
// 对 env.crumbs.push() 不会触发
sessionStorage.setItem('_crumbs', JSON.stringify(value));
this._crumbs = value;
}
get crumbs() {
// 从 sessionStorage 获取或初始化
if (sessionStorage.getItem('_crumbs') !== null) {
this._crumbs = JSON.parse(sessionStorage.getItem('_crumbs'));
} else {
sessionStorage.setItem('_crumbs', JSON.stringify([]));
this._crumbs = [];
}
return this._crumbs;
}
}
let env = new Environment();
let crumb = { MetricId: 6, Concept: 'Back orders' };
env.crumbs.push(crumb); // ⚠️ 这不会触发 crumbs 的 set 访问器！
console.log(sessionStorage.getItem('_crumbs')); // 仍然是 "[]" 或旧值上述代码中，env.crumbs.push(crumb) 操作直接修改了_crumbs数组的引用内容，但并没有改变env.crumbs属性本身的引用。因此，set crumbs(value) 方法不会被调用，导致sessionStorage未能及时更新。
2. 解决方案：利用 Proxy 拦截数组变动
为了解决set访问器的局限性，我们可以使用JavaScript的Proxy对象。Proxy允许我们创建一个对象的代理，并拦截对该对象的基本操作，包括属性读取、写入、函数调用等。通过拦截数组的set操作，我们可以精确地捕获数组的变动。
立即学习“Java免费学习笔记（深入）”；
核心思路是：将类属性设置为一个Proxy对象，该Proxy代理一个内部的数组。当对Proxy对象进行操作时，我们可以定义一个handler来拦截这些操作。对于数组的变异方法，大多数都会最终导致数组的length属性发生变化。因此，我们可以监听length属性的set操作，并在此时执行我们的额外任务。
2.1 Proxy 的实现
以下是使用Proxy改进Environment类的示例：
class Environment {
constructor() {
// 1. 从 sessionStorage 加载或初始化内部数组
// crumbList 将作为 Proxy 的目标对象
const crumbList =
JSON.parse(sessionStorage.getItem('crumbs') ?? null) ?? [];
// 2. 创建一个 Proxy 对象来代理 crumbList
this.crumbs = new Proxy(crumbList, {
/**
* 拦截对代理对象的属性设置操作
* @param {Array} obj 目标对象 (crumbList)
* @param {string|symbol} prop 正在设置的属性名
* @param {*} value 正在设置的属性值
* @returns {boolean} 表示设置操作是否成功
*/
set(obj, prop, value) {
// ⚠️ 优先执行原始的设置操作，确保数组行为正常
const result = Reflect.set(obj, prop, value);
// 3. 关键：当 length 属性被修改时，意味着数组发生了变动
// 大多数数组变异方法（push, pop, splice, unshift, shift等）
// 都会最终导致 length 属性的变化。
if (prop === 'length') {
// 4. 在数组变动后，立即更新 sessionStorage
sessionStorage.setItem('crumbs', JSON.stringify(crumbList));
}
return result;
}
});
// 5. 为代理对象添加 valueOf 方法，返回数组的浅拷贝
// 这在某些场景下（如需要一个纯粹的数组副本）非常有用
Object.defineProperty(this.crumbs, 'valueOf', {
value: function valueOf() {
return [...crumbList]; // 返回内部数组的浅拷贝
},
configurable: true,
writable: true
});
}
}2.2 代码解析
- 内部数组 crumbList: 我们首先初始化一个内部数组 crumbList。它会从 sessionStorage 加载现有数据，如果没有则为空数组。这个 crumbList 将是 Proxy 的真正目标对象。
- 创建 Proxy: this.crumbs = new Proxy(crumbList, { ... }) 创建了一个 Proxy 对象，它将作为 Environment 实例的 crumbs 属性。所有对 this.crumbs 的操作都会被 Proxy 拦截。
-
set 陷阱 (Trap): set(obj, prop, value) 是 Proxy 的一个陷阱，用于拦截对属性的设置操作。
- Reflect.set(obj, prop, value)：这是非常重要的一步。它确保了原始的设置操作（例如，将新元素添加到 crumbList 或修改 length）能够正常执行。Reflect API 提供了与 Proxy 陷阱对应的默认行为。
- if (prop === 'length'): 这是我们监听数组变动的核心逻辑。当数组的 length 属性被修改时，意味着数组的内容发生了增加或删除。push、pop、shift、unshift、splice 等方法都会导致 length 的变化。
- sessionStorage.setItem('crumbs', JSON.stringify(crumbList)): 在检测到 length 变化后，我们将最新的 crumbList 内容序列化并存储到 sessionStorage。
- valueOf 方法: Object.defineProperty(this.crumbs, 'valueOf', ...) 为 Proxy 对象添加了一个 valueOf 方法。当需要获取 crumbs 属性的原始数组副本时，可以调用 env.crumbs.valueOf()。这可以防止直接返回 crumbList 导致外部代码直接修改内部状态。
2.3 使用示例
现在，当我们对 env.crumbs 进行数组变异操作时，sessionStorage 将会自动更新：
const env = new Environment();
const metricId = 6;
const concept = 'Back orders';
const crumb = { metricId, concept };
// 1. push 操作
env.crumbs.push(crumb);
env.crumbs.push('foo');
console.log("After push:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 包含 [crumb, 'foo']
// 2. 直接修改 length
env.crumbs.length = 5; // 即使数组元素不足5个，也会触发 length 变化
env.crumbs.push('bar');
console.log("After length change and push:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 包含 [crumb, 'foo', undefined, undefined, 'bar']
// 3. shift 和 pop 操作
env.crumbs.shift();
env.crumbs.pop();
console.log("After shift and pop:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 相应更新
// 4. splice 操作
env.crumbs.splice(0, 1, 'new item');
console.log("After splice:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 相应更新
console.log({ "currently stored JSON": sessionStorage.getItem('crumbs') });3. 注意事项与总结
- length 属性的可靠性: 监听 length 属性的 set 陷阱是捕获大多数数组变异操作（如 push, pop, shift, unshift, splice, sort, reverse 等）的有效方式，因为这些操作都会导致 length 发生变化。
- 深层嵌套对象: 如果数组中包含对象，并且你希望监听这些对象的内部属性变动，那么你需要对数组中的每个对象也进行 Proxy 包装，或者采用其他深度监听策略。本方案主要针对数组本身的结构变动。
- 性能考量: Proxy 会引入一定的性能开销，但对于大多数应用场景来说，这种开销是微不足道的。
- Reflect API: Reflect API 提供了与 Proxy 陷阱对应的默认操作，使用 Reflect.set 能够确保在执行自定义逻辑的同时，不影响原始操作的正确性。
- valueOf 的作用: 通过提供 valueOf 方法返回数组的浅拷贝，可以避免外部代码直接获取并修改 Proxy 内部的 crumbList 数组，从而保持内部状态的封装性。
通过 Proxy，我们能够为类中的数组属性添加强大的响应式能力，使其在发生变动时能够自动执行自定义逻辑，这对于构建数据持久化、UI更新等功能非常有用。这种模式比手动调用更新函数更加优雅和健壮。
