Is there a way to access superclass variables in subclass with JavaScript?

Question

I was learning JavaScript oops with some sample example when I came across to access superclass methods in subclass which is possible with super keyword but when I try to access or return a variable of super class it returns undefined or the sub class variable I tried in various way to get variable

I have also gone this Stack Overflow post.

class dad {
    constructor(name) {
        this.name = name;
    }
    printname() {
        console.log(this.name);
        var a = 2;
        return a;
    }
    sendVal() {
        console.log(this.name);
        var a = 2;
        return this.name;
    }
}

class son extends dad {
    constructor(name) {
        super(name);
    }
    printname() {
        console.log(super.printname());

    }
    printvariable() {
        console.log(super.name);

    }
    getvalue() {
        console.log(super.sendVal())
    }
}

var o1 = new dad('jackson');
var o2 = new son('jack')

o1.printname()
o2.printname()
o2.printvariable()
o2.getvalue()

Answer 1

When you use super.fieldName to access a field of a parent class, you are actually querying the field name on the prototype of the parent class.

So you might believe calling super(name); from the Son constructor sets the name in the prototype of the parent class, but it is not so, it actually sets the name property inherited by the Son class which you can access by using this.name.

So I modified your example code and shown how to actually get a value by calling super.fieldName. In the example I added a property age in the prototype of the Dad class and set its value to 50, now in the Son class printvariable() will correctly call the super.age by referring the prototype of the Dad class.

You can actually see it in action if you use babel to transpile it to ES2015, after all classes in JavaScript are actually syntactic sugar.

class Dad {
    constructor(name) {
        this.name = name;
        Dad.prototype.age = 50; //adding property to prototype
    }
    printname() {
        console.log(this.name);
        var a = 2;
        return a;
    }
    sendVal() {
        console.log(this.name);
        var a = 2;
        return this.name;
    }
}

class Son extends Dad {
    constructor(name) {
        super(name);
    }
    printname() {
        console.log(super.printname());

    }
    printvariable() {
        console.log(`super.name will be undefined, as not present in prototype of the Dad class: ${super.name}`);
        console.log(`super.age will have a value of 50, present in the prototype of the Dad class: ${super.age}`);
        console.log(`this.name will be jack, as it is set from the constructor of the Son class: ${this.name}`);

    }
    getvalue() {
        console.log(super.sendVal());
    }
}

var o1 = new Dad('jackson');
var o2 = new Son('jack')

o1.printname();
o2.printname();
o2.printvariable();
o2.getvalue();