how to manage super() constructor parameters in javascript

Question

This is a short piece of code from mazeContainer.js with only necessary part-

import Cell from "./cell.js";
import Player from "./player.js";

export default class Maze {
  ....
  setup(){
    for (let rowNum = 0; rowNum < this.rows; rowNum++) {
            let row = [];

            for (let colNum = 0; colNum < this.columns; colNum++) {
                let cell = new Cell(this.ctx, rowNum, colNum, this.cellWidth, this.cellHeight);
                row.push(cell);
            }
            this.grid.push(row);
  }
  
  drawMap(){
    ....
    let player = new Player(this.goal, this.lastRow, this.lastColumn);
    ....
  }
}

And player.js-

import Cell from "./cell.js";

export default 
class Player extends Cell {
    constructor(goal, lastRow, lastColumn) {
        super();                                    // need to manage this statement
        this.goal = goal;
        this.lastRow = lastRow;
        this.lastColumn = lastColumn;
    }
    ....
}

Now here's what I'm having trouble with.

I've just encountered the super keyword and what I've got to know so far is that I need to call super method before using this. That's not an issue. But here I also need to provide all parameters for Cell's constructor.

As you can see, the Cell class has got many parameters in its constructor, so how do I hand them over to new Player(....)?

Is there a better way to achieve this?

Why does Player extend Cell? Is a player a cell? I would just not extend Cell when defining the Player class, based on what I see here. If the player needs to access or "have" a cell, use composition rather than inheritance. — zeterain, Jul 03 '20 at 04:51
You can't access `rowNum` and `colNum` inside the `Player` class because you didn't pass them to the `Player` constructor. since `Player` extends `Cell` you have to pass all `cell` parameters to `Player` — Hassan Azzam, Jul 03 '20 at 04:54
To void passing so many parameters, just use an `options` object for the `Cell` class, and then in your `Player` class pass the `options` to the `super()` and you can access it inside the `Player` class like so `this.options.rowNum` — Hassan Azzam, Jul 03 '20 at 04:57
@HassanAzzam I said I can't access `rowNum` & `colNum` inside `drawMap` method in order to pass to `Player` constructor. That's what I'm looking for. What could be the solution? — Sapinder Singh, Jul 03 '20 at 05:01
Well looking at the code you have a gid of `Cell` objects, each `Cell` object have `rowNum` and `colNum`, and inside the `drawMap` method you're creating one user only, so even if you have access to `colNum` and `rowNum` which ones you're gonna pass to the `Player`. you need to re-think about your code structure, the `Player` class don't need to extend the `Cell`. — Hassan Azzam, Jul 03 '20 at 05:13

sonEtLumiere · Accepted Answer · 2020-07-03T05:00:32.280

• The extends keyword makes the methods of the animal class available inside the cat class.
• The constructor, called when you create a new Cat object, accepts two arguments, name and usesLitter.
• The super keyword calls the constructor of the parent class. In this case, super(name) passes the name argument of the Cat class to the constructor of the Animal class. When the Animal constructor runs, it sets this._name = name; for new Cat instances.
• _usesLitter is a new property that is unique to the Cat class, so we set it in the Cat constructor.

class Animal {                            
  constructor(name) {           
    this._name = name;
  }
  get name() {
    return this._name;
  }
} 


class Cat extends Animal {           
  constructor(name, usesLitter) {
    super(name);                    // The super keyword calls the constructor of the parent class.
    this._usesLitter = usesLitter;
  }
    get usesLitter() {
    return this._usesLitter;
  }
}


const bryceCat = new Cat('Bryce', true);
console.log(bryceCat.name);               //Output: Bryce
console.log(bryceCat.usesLitter);       //Output: true

how to manage super() constructor parameters in javascript

1 Answers1