Can't call static method in JavaScript parent class

Question

I'm trying to access static method baseArea from parent class cars but it shows following error:

test.php:34 Uncaught TypeError: (intermediate value).baseArea is not a function
    at Bike.get bikeArea [as bikeArea] (test.php:34)
    at test.php:42

But it works fine when I use baseArea () {} instead of static baseArea() {}

What am I doing wrong?

class Cars {
    constructor(x, y) {
        this.height = x;
        this.width = y;
    }

    static baseArea() {
        return 44;
    }
}

class Bike extends Cars {
    constructor(flag) {
        super(flag, flag);
    }

    get bikeArea() {
        return super.baseArea();
    }
}

let bike = new Bike(10);
console.log(bike.bikeArea);

Static functions you usually don't call on the object. you call them on the class. — Roland Starke
– Roland Starke, Commented Aug 18, 2017 at 12:29
Please see the example under Super class calls with super here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… They've also called static method using super How's that working? — Vikas
– Vikas, Commented Aug 18, 2017 at 12:41
It may be because the pingpong method is also static AND called with Computer.pingpong() and not new Computer().pingpong() The whole chain is static. Maybe in that circumstances it succeed to resolve the super. — Anthony Raymond
– Anthony Raymond, Commented Aug 18, 2017 at 12:45

Anthony Raymond · Accepted Answer · 2022-04-06 13:30:38Z

10

It does not work because super. is referencing a class instance. And a static method are not attached to instances but to class themselves.

However, the following will work:

class Cars {
    constructor(x, y) {
        this.height = x;
        this.width = y;
    }

    static baseArea() {
        return 44;
    }
}

class Bike extends Cars {
    constructor(flag) {
        super(flag, flag);
    }

    get bikeArea() {
        return Bike.baseArea();
    }
}

Note the Bike.baseArea() (which for the sake of readability can be called that way : Cars.baseArea()).

In the example that you linked here, it is likely that it works because the pingpong method is also static AND called with Computer.pingpong() and not new Computer().pingpong() The whole chain is static. Maybe in that circumstances it succeed to resolve the super.

edited Apr 6, 2022 at 13:30

answered Aug 18, 2017 at 12:42

Anthony Raymond

7,8626 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vikas Over a year ago

See my comment.

Amjed Omar · Accepted Answer · 2021-11-08 21:26:04Z

10

To call parent's static method on child's non-static method using super keyword

class Bike extends Cars {
    get bikeArea() {
        return super.constructor.baseArea();
    }
}

However, to call parent's static method on child's static method using super keyword

class Bike extends Cars {
    static bikeArea() {
        return super.baseArea();
    }
}

answered Nov 8, 2021 at 21:26

Amjed Omar

1,0583 gold badges21 silver badges35 bronze badges

1 Comment

Boaz Over a year ago

I don't like this type of comments usually, but this is definitely the most accurate answer and should be the approved answer. Thank you.

Script47 · Accepted Answer · 2017-08-18 12:33:18Z

3

You can simply call Bike.baseArea() instead of bike.bikeArea() as it has been extended to include Cars.

or

You could change,

get bikeArea() {
    return super.baseArea();
}

to,

static bikeArea() {
    return super.baseArea();
}

Thereby allowing you to call it as Bike.bikeArea().

answered Aug 18, 2017 at 12:33

Script47

14.6k4 gold badges49 silver badges69 bronze badges

1 Comment

Vikas Over a year ago

See my comment under question.

Rafał Gołubowicz · Accepted Answer · 2017-08-18 12:37:15Z

3

You can chnage your

get bikeArea(){
   return super.baseArea();
}

to

get bikeArea(){
   return Cars.baseArea();
}

Or you can simply use that:

class Cars {
    constructor(x, y) {
        this.height = x;
        this.width = y;
    }

    baseArea() {
        return 44;
    }
}

class Bike extends Cars {
    constructor(flag) {
        super(flag, flag);
    }

    bikeArea() {
        return super.baseArea();
    }
}

let bike = new Bike(10);
console.log(bike.bikeArea());

edited Aug 18, 2017 at 12:37

answered Aug 18, 2017 at 12:34

Rafał Gołubowicz

6701 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Can't call static method in JavaScript parent class

4 Answers 4

1 Comment

1 Comment

or

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

or

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related