Why I can't use 'super' in prototype method definition when I can use Object.getPrototypeOf(this.constructor.prototype)?

Question

So I tested this code:

class C1 {}

C1.prototype. f =function(){ return 1 }

class C2 extends C1 {}

C2.prototype. f =function(){ return super.f()+1 }

And it throws a syntax error: 'super' keyword unexpected here.

But if I do:

C2.prototype. f =function(){ return Object.getPrototypeOf(this.constructor.prototype).f() + 1 }

It does return a two!

So does anyone know why 'super' doesn't work? I see no reason for it.

Thanks!

Answer 1

Object.getPrototypeOf(this.constructor.prototype).f() loses the instance:

class C1 {
    constructor(x) {
        this.x = x;
    }

    f() {
        console.log(this.x);
    }
}

class C2 extends C1 {
    f() {
        Object.getPrototypeOf(this.constructor.prototype).f();
    }
}

new C1(42).f();  // 42
new C2(42).f();  // undefined

(because this === C1.prototype when a function is called as C1.prototype.f())

Object.getPrototypeOf(this.constructor.prototype).f.call(this) always has this.constructor as the bottom of the class hierarchy, which breaks when you add a level:

class C1 {
    constructor(x) {
        this.x = x;
    }

    f() {
        console.log(this.x);
    }
}

class C2 extends C1 {
    f() {
        Object.getPrototypeOf(this.constructor.prototype).f.call(this);
    }
}

class C3 extends C2 {}

new C1(42).f();  // 42
new C2(42).f();  // 42
new C3(42).f();  // infinite recursion

A correct version for reasonable code would be

Object.getPrototypeOf(/* containing class */.prototype).f.call(this)

which is basically what super does – and for that, it needs to know the containing class (or object), which doesn’t necessarily exist for arbitrary function expressions.