JavaScript类使用this.ctx时调用update方法报未捕获TypeError

这个报错的触发逻辑是：类方法作为独立回调传入window.requestAnimationFrame时，函数内部的this绑定会从原类实例丢失。
你在update方法里写递归动画调用时，直接把ai.update作为回调参数传入，本质只是传递了update方法的内存引用，没有同步保留该方法原本所属的实例上下文。等浏览器调度执行这个回调时，方法内部的this已经变成了全局作用域对象（严格模式下直接为undefined），此时读取this.ctx就会抛出未定义属性的读取错误。

按照改造成本从低到高，可以选择任意一种方案解决this指向问题：

• 传入动画帧回调时，用箭头函数包裹保留当前上下文
  把原来update方法里的递归调用语句从window.requestAnimationFrame(ai.update) 改为 window.requestAnimationFrame(() => this.update())。箭头函数没有自己的this绑定，会直接继承当前类实例的词法作用域，确保update执行时this永远指向Ai类的实例。
• 构造函数内提前固定update方法的this指向
  在Ai类的构造函数末尾补充绑定逻辑：this.update = this.update.bind(this)。绑定完成后，无论update方法被传递到哪个执行场景，方法内部的this都会固定指向当前Ai类实例，不需要每次传回调时做额外包裹处理。
• 用类属性箭头函数形式定义update方法
  直接将原型上的update方法调整为实例属性形式的箭头函数，初始化实例时就自动绑定当前this，后续把Ai类抽离为独立文件时也不需要额外处理this兼容问题，类的自包含性更强：

  class Ai {
    constructor(x, y, width, height, ctx) {
      // 原有参数挂载逻辑
    }
    drawAi() {
      // 原有绘制逻辑
    }
    // 箭头函数形式的实例方法，自带当前实例this绑定
    update = () => {
      window.requestAnimationFrame(this.update)
      this.ctx.clearRect(0, 0, width, height)
      this.drawAi()
    }
  }
  

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