PixiJS v7扩展Container类报错及事件上下文问题求助

一、正确扩展Container的方式（替代旧原型继承） #

PixiJS v7中核心类（包括PIXI.Container）已改为ES6 Class实现，不再支持旧的原型链继承方式，必须使用class extends语法扩展：

class Tile extends PIXI.Container {
  constructor(letter, value) {
    // 必须先调用父类构造函数
    super();
    
    // 初始化自定义属性
    this._letter = letter;
    this._value = value;
    
    this._initVisuals();
    this._initEvents();
  }
  
  _initVisuals() {
    // 添加Tile背景
    const bg = new PIXI.Graphics()
      .beginFill(0xFFFFFF)
      .drawRoundedRect(0, 0, 80, 80, 8)
      .endFill();
    this.addChild(bg);
    
    // 添加字母文本
    const text = new PIXI.Text(this._letter, { fontSize: 48, fill: 0x333333 });
    text.anchor.set(0.5);
    text.position.set(40, 40);
    this.addChild(text);
  }
  
  _initEvents() {
    this.interactive = true;
    this.buttonMode = true;
    
    // 用箭头函数确保回调内this指向Tile实例
    this.on('pointerdown', (event) => {
      console.log('按下Tile：', this._letter, '分值：', this._value);
      this.startDrag(event);
    });
    
    this.on('pointermove', (event) => this.drag(event));
    this.on('pointerup', () => this.endDrag());
  }
  
  startDrag(event) {
    this._dragOffset = {
      x: event.data.global.x - this.x,
      y: event.data.global.y - this.y
    };
    // 将Tile移至顶层
    this.parent.setChildIndex(this, this.parent.children.length - 1);
  }
  
  drag(event) {
    const pos = event.data.global;
    this.position.set(pos.x - this._dragOffset.x, pos.y - this._dragOffset.y);
  }
  
  endDrag() {
    this._dragOffset = null;
  }
}

这种写法完全遵循ES6类继承规则，不会出现「Class constructor _Container cannot be invoked without 'new'」错误。

二、组合模式下的事件属性访问方案（若坚持使用组合） #

如果必须采用内部包含Container的组合模式，可通过以下两种方法解决事件中无法访问Tile实例属性的问题：

方法1：将Tile实例绑定到内部Container的自定义属性 #

class Tile {
  constructor(letter, value) {
    this._letter = letter;
    this._value = value;
    this.container = new PIXI.Container();
    
    // 将Tile实例挂载到内部Container上
    this.container.tileInstance = this;
    
    this._initVisuals();
    this._initEvents();
  }
  
  _initEvents() {
    this.container.interactive = true;
    this.container.buttonMode = true;
    
    // 通过event.currentTarget.tileInstance访问Tile实例
    this.container.on('pointerdown', (event) => {
      const tile = event.currentTarget.tileInstance;
      console.log('按下Tile：', tile._letter, '分值：', tile._value);
      tile.startDrag(event);
    });
  }
  
  // 其他拖拽方法实现...
}

方法2：用箭头函数绑定上下文 #

class Tile {
  constructor(letter, value) {
    this._letter = letter;
    this._value = value;
    this.container = new PIXI.Container();
    
    this._initVisuals();
    this._initEvents();
  }
  
  _initEvents() {
    this.container.interactive = true;
    this.container.buttonMode = true;
    
    // 箭头函数会捕获当前this（即Tile实例）
    this.container.on('pointerdown', (event) => {
      console.log('按下Tile：', this._letter, '分值：', this._value);
      this.startDrag(event);
    });
  }
  
  // 其他拖拽方法实现...
}

三、关键注意点 #

• PixiJS v7中交互事件的event.currentTarget指向绑定事件的对象，event.target指向实际触发事件的子元素，访问Tile实例优先用currentTarget。
• 扩展类时必须先调用super()，否则会触发报错。
• 交互属性（interactive、buttonMode）需设置在绑定事件的对象上（继承的Container或组合内的内部Container均可）。

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