Inheritance and Super in JavaScript

Question

I am on Day 3 of learning JavaScript. I came across this code:

class B {
    constructor(name) {
        this.name = name;
    }

    printn() {
        return th         


        

Answer 1

What is the constructor and super() keyword. I believe it is for inheritance?

That's right. The above sets up class B and then has class A subclass it. The constructor is the function called when you create a new instance of the class, as in the let c = new A("Testing", "37"); line in the code. Unlike some other languages, in JavaScript there can only be one constructor for a class.

super is used in subclasses to refer to the superclass. In a constructor, you call super as though it were a function, and that calls the superclass's constructor function, giving it a chance to do its initialization of the new object that was created by new. So for instance, in A's constructor, super() calls B's constructor.

You can also use super as the source of a property accessor expression to access properties (including methods) on the superclass. That's what's happening in A's printName method, where it uses super.printName() to call B's printName method. (Which will fail, because B doesn't have a printName method; B's method is called printn.)

I'd be remiss if I didn't point out that although this looks a lot like the class-based OOP in, say, Java or C#, it isn't. It's syntactic sugar (the good kind of sugar) for setting up JavaScript's normal prototypical inheritance using constructor functions. It hugely simplifies setting up prototypical inheritance hierarchies using constructor functions. I'd also be remiss if I didn't point out that using constructor functions to do prototypical inheritance is not necessary, you can do prototypical inheritance without using constructor functions via Object.create.

There's a lot more to explore. MDN is probably a good starting point.

I can't get this code to work.

The C in Console.log shouldn't be capitalized, so change

Console.log(c.printn());

to

console.log(c.printn());

Other than that, if you're using a JavaScript engine that supports class (such as the one in Google Chrome or Mozilla Firefox), that code works fine although note again that A seems to expect B to have a printName method, but it doesn't, and the code at the end is calling printn which only B has (which is fine, it just means A's code isn't really involved).

class B {
    constructor(name) {
        this.name = name;
    }

    printn() {
        return this.name;
    }
}

class A extends B {
    constructor(name, age) {
        super(name);
        this._age = age;
    }

    get age() {
        return this._age;
    }

    printName(){
        return super.printName();
    }
}

let c = new A("Testing", "37");
console.log(c.printn());