JS继承类实例调用父类参数显示undefined问题求助

核心原因 #

student1.subject返回undefined的本质问题是：父类构造函数未将subject挂载到实例，或子类调用父类构造函数时未传递subject参数。而fun3能正常运行，是因为子类继承了父类原型上的方法，不受实例属性初始化问题影响。

错误代码示例（匹配你的场景） #

class Students {
  constructor(name, age, subject) {
    this.name = name;
    this.age = age;
    // 遗漏：未将subject赋值给实例this
    // this.subject = subject;
  }
  fun3() {
    console.log("执行fun3方法");
  }
}

class Dance extends Students {
  constructor(name, age) {
    // 遗漏：调用super时未传递subject参数
    super(name, age);
  }
}

const student1 = new Dance("张三", 16);
console.log(student1.subject); // undefined
student1.fun3(); // 正常输出"执行fun3方法"

修复方式 #

根据不同场景，有两种常见修复：

修复1：确保父类构造函数挂载所有属性

如果父类漏写了subject的实例赋值，补上即可：

class Students {
  constructor(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject; // 新增：将subject挂载到实例
  }
  fun3() {
    console.log("执行fun3方法");
  }
}

class Dance extends Students {
  constructor(name, age, subject) {
    super(name, age, subject); // 调用父类构造时传递所有参数
  }
}

const student1 = new Dance("张三", 16, "舞蹈");
console.log(student1.subject); // 输出"舞蹈"
student1.fun3(); // 正常执行

修复2：子类无额外逻辑时省略构造函数

如果子类不需要扩展构造逻辑，可以直接省略构造函数，此时会自动调用父类构造并传递所有参数：

class Students {
  constructor(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject;
  }
  fun3() {
    console.log("执行fun3方法");
  }
}

class Dance extends Students {} // 省略构造函数，默认继承父类构造逻辑

const student1 = new Dance("张三", 16, "舞蹈");
console.log(student1.subject); // 输出"舞蹈"
student1.fun3(); // 正常执行

关键说明 #

• ES6类中，子类构造函数必须先调用super()才能使用this；如果子类没有自定义构造函数，会默认生成一个调用super(...arguments)的构造函数。
• 父类的方法定义在原型上，子类会继承这个原型，所以即使实例属性初始化有问题，原型方法依然可以正常调用；而实例属性需要通过构造函数正确赋值才能被访问到。

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