继承Float32Array的类在Firefox中构造函数重复调用问题咨询

这是个挺棘手的跨浏览器差异问题，我来帮你理清楚原因和修复方案：

为什么会出现这种情况？ #

这是Firefox对TypedArray子类的特有实现逻辑，不算严格意义上的bug，但确实和Chrome/Edge的表现不一致。

TypedArray（比如Float32Array）本质是底层ArrayBuffer的"视图"，当你继承它时，Firefox在一些场景下（比如控制台打印对象、内部处理视图时），会尝试用你的子类构造函数重新包装底层的视图数据——这就是每次打印v时，构造函数被再次调用，还传入ArrayBuffer、偏移量、长度这些参数的原因。

而Chrome/Edge的实现则是直接复用已创建的子类实例，不会触发构造函数二次执行。普通Array继承没有这个问题，是因为Array的内部机制和TypedArray完全不同。

怎么修复？ #

核心思路是让你的子类构造函数兼容TypedArray的标准参数签名，也就是同时处理用户主动调用和Firefox内部调用两种情况：

方案1：手动处理参数分支 #

修改构造函数，判断参数类型，分别处理：

"use strict";
class ARRAYty extends Float32Array {
  constructor(...a) {
    console.log('ARRAYty', ...a);
    // 区分用户调用和Firefox内部调用
    if (a.length === 0) {
      // 用户主动调用：创建长度为10的数组
      super(10);
    } else {
      // Firefox内部调用：传入buffer/offset/length，直接传给父类
      super(...a);
    }
  }
}
var v = new ARRAYty();
console.log('V constructed');
console.log(v);
console.log(v);

方案2：使用默认构造函数 #

如果你的子类不需要自定义构造逻辑，直接省略构造函数即可——JS引擎会自动生成兼容所有TypedArray参数的默认构造函数，完美适配各浏览器：

"use strict";
class ARRAYty extends Float32Array {
  // 无需自定义构造函数，用默认实现
}
var v = new ARRAYty(10);
console.log('V constructed');
console.log(v);
console.log(v);

补充说明 #

这种差异源于TypedArray的特殊设计：它不是普通的对象，而是绑定ArrayBuffer的视图。不同浏览器在处理子类实例的视图复用逻辑上选择了不同的路径，Firefox的实现更偏向于"动态包装视图"，而其他浏览器则保留实例引用。只要让构造函数兼容标准的TypedArray参数，就能在所有浏览器中获得一致表现。

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