Question 167610 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot found the parent class method

Here is the parent class:

    export default class RosterTableUtil{
    constructor() {
        let highLightCellIndex = -1, highLightRowIndex = -1;
        ................
        this.updateUI = (cellIndex, rowIndex) => {
            highLightCellIndex = cellIndex;
            highLightRowIndex = rowIndex;
        }
      }
   }

Here is the child class:

import RosterTableUtil from "./RosterTableUtil";
export default class RosterSchedulerTableUtil extends RosterTableUtil{
  constructor(){
    super();
    .............

    this.updateUI = (cellIndex, rowIndex) => {
        super.updateUI(cellIndex, rowIndex);
        updateSelectRegion(cellIndex, rowIndex);
    }  
  }
}

When the RosterSchedulerTableUtil.updateUI function is called, I got the following error:

Uncaught TypeError: (intermediate value).updateUI is not a function

How can I fix the problem?

Tags:

2

Answers


  1. 0

    To fix the problem, you need to add a super() call to the beginning of the updateUI function in the child class.

    export default class RosterSchedulerTableUtil extends RosterTableUtil {

  constructor() {

    super();
    // Additional constructor logic for the child class
  }

  updateUI(cellIndex, rowIndex) {

    super.updateUI(cellIndex, rowIndex); // Call the parent class method
    updateSelectRegion(cellIndex, rowIndex);

  }
}
    Login or Signup to reply.
  2. 0

    Updated to use private fields.

    It’s not obvious to me why you’d want to do all of that within the constructor. Seems like that’s what instance methods are for. You could move it out of the constructor like this:

    class RosterTableUtil {
  #highLightCellIndex = -1
  #highLightRowIndex = -1;
  
  updateUI (cellIndex, rowIndex) {
    this.#highLightCellIndex = cellIndex;
    this.#highLightRowIndex = rowIndex;
    console.log(`RosterTableUtil row ${this.#highLightRowIndex}, cell ${this.#highLightCellIndex}`);
  }
}

class RosterSchedulerTableUtil extends RosterTableUtil {
  updateUI (cellIndex, rowIndex) {
    super.updateUI(cellIndex, rowIndex);
    // do other stuff
  }
}

const util = new RosterSchedulerTableUtil();
util.updateUI(1,2);
util.updateUI(3,4);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search