What is constructor chaining?

Constructor chaining means one constructor calls another constructor so you can reuse setup code. This happens in classes with extends and super().

import Enemy from '@assets/js/GameEnginev1/essentials/Enemy.js';
import Player from '@assets/js/GameEnginev1/essentials/Player.js';

class Guard extends Enemy {
    constructor(data = null, gameEnv = null) {
        super(data, gameEnv);  // Call parent constructor to get all Enemy properties
        this.velocity.y = -3;  
    }

    
    handleCollisionEvent() {
        var player = this.gameEnv.gameObjects.find(obj => obj instanceof Player);
        console.log("Collision has occurred, player has been destroyed.");
        player.destroy();
        this.playerDestroyed = true;
    }

    // Override parent method - Guard bounces off canvas edges
    stayWithinCanvas() {
        // Bottom of the canvas
        if (this.position.y + this.height > this.gameEnv.innerHeight) {
            this.position.y = this.gameEnv.innerHeight - this.height;
            this.velocity.y *= -1;  // Reverse direction to bounce
        }
        // Top of the canvas
        if (this.position.y < 0) {
            this.position.y = 1;
            this.velocity.y *= -1;  // Reverse direction to bounce
        }
        // Right and left boundaries
        if (this.position.x + this.width > this.gameEnv.innerWidth) {
            this.position.x = this.gameEnv.innerWidth - this.width;
            this.velocity.x = 0;
        }
        if (this.position.x < 0) {
            this.position.x = 0;
            this.velocity.x = 0;
        }
    }
}

What does this code do?

In this code, we create a class Guard that extends Enemy

// Parent class
class Enemy {
    constructor(name, health) {
        this.name = name;
        this.health = health;
        this.active = true;
    }
}

// Child class - uses super() to call parent constructor
class Guard extends Enemy {
    constructor(name, health, patrolRange) {
        super(name, health); // Calls parent constructor first
        this.patrolRange = patrolRange;
    }
    
    patrol() {
        console.log(this.name + " patrols within range " + this.patrolRange);
    }
}

// Create instance
const guard = new Guard("Guard1", 50, 100);
console.log(guard.name); // Guard1 (from parent)
console.log(guard.health); // 50 (from parent)
console.log(guard.patrolRange); // 100 (from child)
guard.patrol(); // Guard1 patrols within range 100

What does this code do?

• Parent Enemy class has a constructor that sets name, health, and active
• Child Guard class extends Enemy
• super() calls the parent constructor first, passing it the required parameters
• After parent setup completes, child constructor runs its own initialization
• Guard instance has all properties from both parent and child
• This ensures parent properties are always initialized correctly before child adds its own

import Enemy from '@assets/js/GameEnginev1/essentials/Enemy.js';

class Guard extends Enemy {
    constructor(data = null, gameEnv = null) {
        super(data, gameEnv);
        this.velocity.y = -3;
    }

    stayWithinCanvas() {
        if (this.position.y + this.height > this.gameEnv.innerHeight) {
            this.position.y = this.gameEnv.innerHeight - this.height;
            this.velocity.y *= -1;
        }
        if (this.position.y < 0) {
            this.position.y = 1;
            this.velocity.y *= -1;
        }
    }
}

export default Guard;

What does this class do?

• Guard extends Enemy, calling super() to initialize parent properties
• Sets Guard-specific velocity in the child constructor
• Overrides stayWithinCanvas() method from parent
• Guard bounces off edges by reversing velocity instead of stopping
• With constructor chaining, all Enemy properties are set up before Guard adds its own behavior

Try It Yourself

%%js // CODE_RUNNER: constructor-chaining class Entity { constructor(x, y) { this.x = x; this.y = y; } } class Player extends Entity { constructor(x, y, health) { super(x, y); this.health = health; } } const p = new Player(100, 300, 100); console.log(p.x, p.health);