JavaScript子类继承父类获取参数出现NaN问题的解决求助

问题原因 #

你的代码出现NaN的核心问题是子类调用super()时的参数顺序与父类构造函数不匹配：

• 父类transportasi的构造函数参数顺序为 nama → roda → pintu
• 子类mobil调用super(roda)时，是把传入的roda值赋值给了父类的nama属性，而父类的roda参数没有接收到任何值，最终this.roda为undefined
• 当执行this.lampu + this.roda时，4 + undefined的结果就是NaN

修复方案 #

要让父类的roda属性正确接收你传入的值，需保证super()的参数顺序和父类构造函数一致。如果子类不需要使用父类的nama和pintu，可以给这两个参数传占位值（如null、undefined）。

修正后的完整代码

class transportasi {//class parent
  constructor(nama, roda, pintu){
    this.nama = nama
    this.roda = roda
    this.pintu = pintu
  }
}

class mobil extends transportasi{//Class Children
  constructor(roda, lampu){
    // 按父类参数顺序传值：nama用null占位，roda传入对应值，pintu用null占位
    super(null, roda, null)
    this.lampu = lampu
  }

  jmlahfeature(){
    return this.lampu + this.roda 
  }
}
const mobil1 = new mobil(2, 4)

console.log("Hasil Perhitungan Feature mobil : " + mobil1.jmlahfeature()) // 输出：Hasil Perhitungan Feature mobil : 6

另一种优化方式：给父类参数设置默认值

如果父类的部分参数不是必须的，可以给它们设置默认值，这样子类调用super()时可以只传需要的参数：

class transportasi {//class parent
  // 给nama、pintu设置默认值，避免未传值时出现undefined
  constructor(nama = '', roda = 0, pintu = 0){
    this.nama = nama
    this.roda = roda
    this.pintu = pintu
  }
}

class mobil extends transportasi{//Class Children
  constructor(roda, lampu){
    // 只传需要的roda参数，其他用默认值
    super(undefined, roda)
    this.lampu = lampu
  }

  jmlahfeature(){
    return this.lampu + this.roda 
  }
}
const mobil1 = new mobil(2, 4)

console.log("Hasil Perhitungan Feature mobil : " + mobil1.jmlahfeature()) // 输出：Hasil Perhitungan Feature mobil : 6

关键总结 #

• 子类继承父类时，super()的参数必须严格对应父类构造函数的参数顺序
• 如果父类构造函数有必填参数，子类必须通过super()传入对应的值，否则会导致属性为undefined，进而引发计算错误

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