如何通过原型正确继承DataView并扩展方法？遇兼容性报错求助

嘿，我来帮你搞定这个DataView继承的坑！你遇到的DataView.prototype.byteLength called on incompatible receiver报错，根源在于你只修改了原型链，但没有正确初始化DataView的内部状态。

为什么你的代码会报错？ #

DataView的核心属性（比如byteLength、buffer）都是绑定在它实例的内部槽（JS引擎层面的私有数据）上的，不是普通的原型属性。你原来的代码：

var CFDataView = function() { this.offset = 0; }; 
CFDataView.prototype.__proto__ = DataView.prototype; 

只是把CFDataView的原型链指向了DataView.prototype，但你的CFDataView实例从来没有调用过DataView的构造函数，根本没有初始化那些内部槽。当你调用this.byteLength时，JS引擎发现这个实例不是真正的DataView实例，自然就抛出了不兼容的错误。

正确的实现方式 #

方法1：ES6 Class继承（推荐）

用class语法可以最简洁、规范地实现继承，super()会帮你自动初始化DataView的所有内部状态：

class CFDataView extends DataView {
  constructor(buffer, byteOffset = 0, byteLength) {
    // 必须先调用super，传入DataView需要的参数（缓冲区、偏移、长度）
    super(buffer, byteOffset, byteLength);
    // 添加自定义属性
    this.offset = 0;
  }

  // 自定义方法
  readU8() {
    if (this.byteLength >= this.offset + 1) {
      return this.getUint8(this.offset++);
    } else {
      return null;
    }
  }
}

方法2：ES5兼容写法（适合旧环境）

如果需要支持不支持class的环境，可以用构造函数调用+Object.create来实现：

function CFDataView(buffer, byteOffset, byteLength) {
  // 调用DataView构造函数，把当前实例作为this传入，初始化内部状态
  DataView.call(this, buffer, byteOffset, byteLength);
  // 添加自定义属性
  this.offset = 0;
}

// 正确设置原型链，继承DataView的原型方法
CFDataView.prototype = Object.create(DataView.prototype, {
  // 修复constructor指向，避免原型链混乱
  constructor: {
    value: CFDataView,
    enumerable: false,
    writable: true,
    configurable: true
  }
});

// 添加自定义方法
CFDataView.prototype.readU8 = function() {
  if (this.byteLength >= this.offset + 1) {
    return this.getUint8(this.offset++);
  } else {
    return null;
  }
};

测试示例 #

不管用哪种写法，都可以这样测试：

// 创建一个4字节的ArrayBuffer
const buffer = new ArrayBuffer(4);
const cfDv = new CFDataView(buffer);

// 写入两个字节的数据
cfDv.setUint8(0, 0x12);
cfDv.setUint8(1, 0x34);

// 读取测试
console.log(cfDv.readU8()); // 输出18（0x12的十进制值）
console.log(cfDv.readU8()); // 输出52（0x34的十进制值）
console.log(cfDv.readU8()); // 输出null（已经超出缓冲区长度）

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