TypeScript/JS继承WebGLRenderingContext调用super()报非法构造器错误怎么办

WebGLRenderingContext是浏览器引擎内置的宿主原生类，没有向页面JS代码开放可调用的公开构造器。它的实例只能通过Canvas元素调用getContext('webgl')/getContext('webgl2')的返回值获取，完全不允许用户代码通过new、类继承的super()方式主动调用它的构造逻辑。

• 这个报错和你是否给super()传参数没有任何关系——不管传什么参数，只要外部代码尝试调用这个原生类的构造器，浏览器就会直接抛出Illegal constructor错误，这是WebGL规范明确的设计行为。
• 之所以TypeScript在编译阶段没有提示报错，是因为TS内置的WebGL类型定义为了方便类型标注，把WebGLRenderingContext模拟成了一个可继承的类结构，但这只是纯类型层面的描述，和浏览器运行时的原生实现逻辑完全脱节。

• 放弃类继承WebGLRenderingContext的写法，改用组合模式实现能力扩展：自定义类内部持有一个合法获取的WebGL上下文实例，把需要的WebGL操作委托给这个内部实例完成，不需要走继承流程。
• 适配你原有逻辑的TypeScript参考实现：

export abstract class ShaderCore {
  // 内部持有合法的WebGL上下文实例
  protected gl: WebGLRenderingContext;
  // 原有自定义类的属性保留即可
  protected shaderProgram!: WebGLProgram;
  protected positionBuffer!: WebGLBuffer;

  /**
   * 构造函数接收画布元素作为入参，自行完成WebGL上下文初始化
   */
  public constructor(canvas: HTMLCanvasElement) {
    // 从画布获取合法的WebGL上下文，这是获取WebGLRenderingContext实例的唯一合规渠道
    this.gl = canvas.getContext('webgl') as WebGLRenderingContext;

    // 原有初始化逻辑全部替换为通过内部gl实例调用
    this.shaderProgram = this.gl.createProgram() as WebGLProgram;
    this.positionBuffer = this.gl.createBuffer() as WebGLBuffer;
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);

    // 原有事件绑定逻辑保留，注意修正this指向
    window.addEventListener('resize', this.onWindowResize.bind(this), false);
  }

  // 可选：对常用WebGL方法做薄封装，对外暴露需要的能力
  public bufferData(target: number, data: BufferSource, usage: number) {
    this.gl.bufferData(target, data, usage);
  }

  protected abstract onWindowResize(): void;
}

• 不存在“传特定参数给super()就能解决问题”的可能性：原生类的构造器拦截逻辑是在浏览器引擎层实现的，和JS层传的参数无关，任何外部调用尝试都会被拦截。
• 不要通过原型链篡改、Object.assign的方式给WebGL上下文对象塞自定义属性和方法，这种写法会破坏浏览器对WebGL上下文的内部内存管理和性能优化，容易引发内存泄漏、上下文丢失问题。

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