So I was messing around with ES6 classes when I saw something surprising:

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak(sound) {
        console.log(sound);
    }
}

class Dog extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    speak() {
        super.speak("Woof! I'm " + super.name + " and am " + this.age);
    }
}

Then, I created my dog:

var mydog = new Dog("mydog",3);
mydog.speak();

Now this prints

Woof! I'm undefined and am 3

So my question is, why is super.name undefined? I'm expecting it to be mydog in this case.

So I was messing around with ES6 classes when I saw something surprising:

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak(sound) {
        console.log(sound);
    }
}

class Dog extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    speak() {
        super.speak("Woof! I'm " + super.name + " and am " + this.age);
    }
}

Then, I created my dog:

var mydog = new Dog("mydog",3);
mydog.speak();

Now this prints

Woof! I'm undefined and am 3

So my question is, why is super.name undefined? I'm expecting it to be mydog in this case.

• javascript
• class
• inheritance
• ecmascript-6
• super

• 4 super can only be used to access properties on the prototype. Using this.name you are assigning to the instance and so always need to access it using this – CodingIntrigue Commented Dec 29, 2015 at 18:52
• Why can't you access the super attribute but assign a value? class a { name = 'jack'; speak() { console.log(this.name); } } class b extends a { count() { super.name = 'Lucy'; super.speak(); } } new b().count(); // Lucy – weiya ou Commented May 13, 2021 at 14:27

1 Answer 1

this in the parent constructor still refers to the dog, so this.name = name, sets the property name directly on the Dog object and not on its parent. Using this.name will work:

super.speak("Woof! I'm " + this.name + " and am " + this.age);