JS子类构造参数少于父类时调用super出现属性undefined问题

JavaScript中父类构造函数的参数是按位置顺序匹配的，不是按参数名匹配的。你当前代码里调用super(name, age, habitat)的时候，三个参数会按顺序对应父类Animal构造函数的前三个参数：

• name → 父类第一个参数name（匹配正确）
• age → 父类第二个参数age（匹配正确）
• habitat → 父类第三个参数legs（匹配错误，你把鲨鱼的栖息地传给了父类的腿数字段）

父类剩下的第四个species、第五个habitat参数没有传入值，默认就是undefined。你后续在子类构造函数里只重写了legs和species属性，没有重写habitat，所以最终实例的habitat就保留了父类赋值的undefined。

调用super的时候，把父类需要的5个参数按顺序补全，固定的参数直接传字面量即可，不用让外部传入：

class Shark extends Animal {
  constructor(name, age, habitat) {
    // 按父类参数顺序传参：name, age, legs, species, habitat
    super(name, age, 0, 'shark', habitat);
  }
}

这种写法不需要在子类里重复给legs和species赋值，父类构造函数会直接处理赋值，外部创建Shark实例的时候还是只需要传3个参数，完全符合你的需求。

修复后运行const john = new Shark('John', 15, 'ocean')，输出的实例就会正确携带habitat: 'ocean'属性。

内容的提问来源于stack exchange，提问作者Lukasz Pospiech