本文详解如何通过 es6 proxy 创建一个能被 `for...of` 正确遍历的“自引用可迭代数组”，核心在于拦截 `symbol.iterator` 等 symbol 属性，确保代理对象满足迭代协议。
在 JavaScript 中，for...of 循环并非简单检查对象是否有 length 或是否为数组，而是严格遵循迭代协议（Iteration Protocol）：它会尝试读取目标对象的 Symbol.iterator 方法，并调用其返回一个迭代器对象。若代理未显式暴露该 symbol 属性，即使底层是数组，for...of 仍会报错 is not iterable。
你原始代码的问题正在于此：get 拦截器只处理了字符串属性（如 'length'、'push'），却忽略了所有 Symbol 类型的 key（包括 Symbol.iterator、Symbol.toStringTag 等）。当 for (let v of p.any) 执行时，引擎实际发出的是 p.any[Symbol.iterator]() 调用，而你的逻辑返回了 p（即另一个 Proxy），而非一个合法迭代器函数——导致 TypeError。
✅ 正确解法是：允许 Symbol 属性直接委托给原数组，同时确保数组初始即包含自身引用，从而形成“自迭代”结构：
const p = new Proxy([], {
get(obj, prop) {
// ✅ 关键：对 Symbol 属性（含 Symbol.iterator）一律透传
if (typeof prop === 'symbol') {
return obj[prop];
}
// ✅ 首次访问任意属性时，向原数组插入自身（避免重复 push）
if (obj.length === 0) {
obj.push(p);
}
// ✅ 显式放行关键数组自有属性
if (prop === 'length' || prop === 'push' ||
prop === 'forEach' || prop === 'map' ||
prop === 'filter' || prop === 'reduce') {
return obj[prop];
}
// ❌ 其他字符串属性均返回代理自身（实现链式“any”访问）
return p;
}
});现在验证效果：
// ✅ 可被 for...of 遍历，输出一次 p（即自身）
for (let v of p) {
console.log(v === p); // true
}
// ✅ 支持嵌套访问，每一层都是同一代理实例
console.log(p.any === p); // true
console.log(p.any.any === p); // true
// ✅ 原生数组方法可用（因 push/forEach 等已透传）
p.push('extra');
console.log(p); // [p, 'extra']
// ✅ toString()、JSON.stringify 等也更健壮（可选增强：拦截 Symbol.toStringTag）⚠️ 注意事项：
- 不要写 p.push(p)（p 是代理，非原数组），应操作 obj.push(p) —— 这是 get 的第二个参数，指向被代理的原始目标对象；
- 若需支持 Array.isArray(p) 返回 true，可额外拦截 Symbol.toStringTag 并返回 'Array'；
- 生产环境慎用此模式：无限自引用可能导致调试困难或 JSON 序列化崩溃（JSON.stringify(p) 会抛出 TypeError: Converting circular structure to JSON）；
- 如需兼容更多数组方法（如 flat()、at()），应在 get 中补充对应字符串属性透传。
总结：Proxy 的 get 拦截器必须主动识别并透传 Symbol 属性，尤其是 Symbol.iterator，这是让自定义对象融入 JavaScript 迭代生态的必要条件。掌握这一原则，你就能灵活构建符合语言协议的响应式、递归或虚拟数据结构。
