web游戏JS开发报错：Cannot access 'Sprite' before initialization

错误根因 #

ES6 中class声明和let/const声明逻辑一致，不存在变量提升，在声明语句执行完成前访问类名，会触发暂时性死区（TDZ）报错。
你的代码中实例化Sprite的语句写在了类声明的上方，运行到实例化代码时Sprite还未完成初始化，直接抛出引用错误。
另外代码里存在一个拼写隐患：你写的变量名backgorund是拼写错误，正确拼写为background，后续引用时容易触发变量不存在的报错。

修复方案 #

调整代码执行顺序，先完成类的声明，再执行实例化操作，修正后代码如下：

// 1. 先声明Sprite类
class Sprite {
    constructor({position, velocity, imageSrc}) {
        this.position = position
        this.velocity = velocity
        this.width = 50
        this.height = 150
        this.image = new Image()
        this.image.src = imageSrc
    }
    draw() {
      c.drawImage(this.image, this.position.x, this.position.y)
    }
    update() {
        this.draw()
    }
}

// 2. 类声明完成后再创建实例
const background = new Sprite({
  position: {
    x: 0,
    y: 0
  },
  imageSrc: './img/background.png'
})

优化提示：你当前创建背景实例时没有传入velocity参数，后续如果做运动逻辑调用this.velocity.x这类属性会触发undefined报错，建议给构造函数参数加默认值：

constructor({position, velocity = {x: 0, y: 0}, imageSrc}) {
  // 原有逻辑不变
}

同类问题通用排查思路 #

后续遇到相同类型的Cannot access 'XXX' before initialization报错，按以下顺序排查即可：

• 定位报错指向的变量/类名，检查所有使用该标识符的代码位置，确认所有调用都在声明语句之后
• 区分声明类型的提升规则：var和function声明会做作用域提升，let/const/class声明不会提升，声明前访问必然触发TDZ错误
• 若代码顺序没有问题，检查是否存在两个模块/类循环引用的情况，循环加载会导致其中一个标识符未完成初始化就被调用

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