如何检测JS ArrayBuffer变更？实现类虚拟内存的ArrayBuffer方案

为什么Proxy包装ArrayBuffer无效 #

TypedArray构造器会直接读取传入的ArrayBuffer的底层字节数据，完全跳过Proxy的陷阱拦截逻辑——它不会通过Proxy代理访问缓冲区，所以这种方式根本起不到地址映射的作用。

可行的替代方案 #

1. 封装自定义映射类（推荐） #

不用直接操作原生ArrayBuffer，而是封装一个和TypedArray API对齐的自定义类，内部处理地址映射逻辑，对外暴露一致的读写接口：

class MappedUint8Array {
  constructor(realBuffer, addressMapper) {
    this.realArray = new Uint8Array(realBuffer);
    this.addressMapper = addressMapper; // 虚拟地址转真实地址的映射函数
    this._virtualLength = 0x10000; // 自定义虚拟内存空间长度
  }

  get(index) {
    const realIdx = this.addressMapper(index);
    return this.realArray[realIdx];
  }

  set(index, value) {
    const realIdx = this.addressMapper(index);
    this.realArray[realIdx] = value;
  }

  // 按需实现原生TypedArray的其他方法，比如slice、forEach
  get length() {
    return this._virtualLength;
  }
}

使用示例：

// 4KB真实内存缓冲区
const realBuffer = new ArrayBuffer(0x1000);
// 映射规则：虚拟地址0x0000-0xFFFF中，每4KB镜像映射到真实内存的0x0000-0x0FFF
const mappedArray = new MappedUint8Array(realBuffer, (virtualIdx) => virtualIdx % 0x1000);

mappedArray.set(0x1234, 0xAB);
console.log(mappedArray.get(0x0234)); // 输出0xAB，因为0x1234取模后等于0x0234

2. 重写TypedArray原型方法（不推荐，侵入性强） #

如果硬要基于原生TypedArray改造，只能重写其部分原型方法，但这种方式无法拦截直接的索引读写（比如arr[0] = 1），且会影响全局所有同类型TypedArray实例：

const originalSet = Uint8Array.prototype.set;
Uint8Array.prototype.set = function(value, index) {
  const mappedIdx = index % 0x1000; // 示例映射规则
  return originalSet.call(this, value, mappedIdx);
};

方案对比 #

• 自定义类方案：完全可控，不会污染全局环境，API可与原生TypedArray完全对齐，健壮性最高，是生产环境的首选。
• 原型重写方案：只能拦截set等少数方法，无法处理直接索引访问，侵入性极强，仅适合临时测试场景。

内容的提问来源于stack exchange，提问作者laptou