JavaScript继承报错：已定义position却无法读取其x属性

Hey there! This is such a common pitfall with JavaScript class inheritance—let's figure out why your Sprite instance's position is coming up undefined, and how to fix it.

The Core Issue: Super() Timing & Parameter Passing #

When you extend a class in JavaScript, the subclass's constructor has two non-negotiable rules if you want to use this or inherit parent properties properly:

• You must call super() before accessing this in the subclass constructor. Skipping this, or calling it after using this, breaks the parent class's initialization logic.
• If the parent class's constructor requires parameters to set up properties like position, you need to pass those parameters to super().

Let's Break Down Common Mistakes & Fixes #

Let's use example code to mirror your scenario:

1. Parent Class (MoveableObject)

First, let's assume your parent class looks something like this (it initializes position based on input parameters):

class MoveableObject {
  constructor(x, y) {
    // This sets the position property we need
    this.position = { x: x, y: y };
  }
}

2. Mistake 1: Forgetting to Call super() (or Calling It Late)

If your Sprite constructor tries to use this before calling super(), or skips super() entirely, the parent class never gets a chance to initialize position:

// ❌ Wrong: Uses this before super()
class Sprite extends MoveableObject {
  constructor(x, y, imageSrc) {
    this.image = new Image(); // Error here, plus position never gets set
    this.image.src = imageSrc;
    super(x, y);
  }

  draw(ctx) {
    ctx.drawImage(this.image, this.position.x, this.position.y); // position is undefined
  }
}

Fix: Call super() first, then set subclass properties:

// ✅ Correct: Super() first, then this
class Sprite extends MoveableObject {
  constructor(x, y, imageSrc) {
    // Pass the required position parameters to the parent constructor
    super(x, y);
    // Now we can safely use this for subclass-specific properties
    this.image = new Image();
    this.image.src = imageSrc;
  }

  draw(ctx) {
    ctx.drawImage(this.image, this.position.x, this.position.y); // position exists!
  }
}

3. Mistake 2: Not Passing Parameters to super()

If your parent class needs parameters to create position, but you call super() without them, the parent can't initialize the property correctly:

// ❌ Wrong: No parameters passed to super()
class Sprite extends MoveableObject {
  constructor(imageSrc) {
    super(); // Parent gets no x/y, so position is undefined or invalid
    this.image = new Image();
    this.image.src = imageSrc;
  }
}

Fix: Always pass the parameters the parent constructor expects:

// ✅ Correct: Pass x/y to super()
const playerSprite = new Sprite(50, 100, 'player.png');
console.log(playerSprite.position); // { x: 50, y: 100 }
playerSprite.draw(canvasContext); // No more TypeError!

Quick Checklist to Debug Your Code #

• Does your Sprite constructor call super() first (before any this references)?
• Are you passing all required parameters from Sprite's constructor to super() (matching what MoveableObject expects)?
• Double-check that MoveableObject's constructor is actually setting this.position (no typos like this.pos instead of this.position).

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