JavaScript导入类后无法调用方法，使用extends仍报错求助

你的代码存在两个核心问题：

1. 类的顶层语法不允许直接执行函数调用语句，所有执行逻辑必须放在类的方法（如构造函数、自定义方法）内部
2. 你调用的是实例方法，这类方法需要先实例化类才能调用；若想直接通过类名调用，需将方法改为静态方法

同时注意原StudentMapping类中存在拼写错误：属性studentsubjectid在方法中被误写为studentsubjectId（大小写不一致），这会导致后续元素定位失败，需要先修正。

方案1：实例化StudentMapping后调用方法 #

将调用逻辑放到StudentDetails的方法内部，先创建StudentMapping的实例，再调用实例方法：

import StudentMapping from '../../students/studentMap';

class StudentDetails {
  studentcode = "div[id='scode']";
  studentname = "div[id='sname']";

  // 放入构造函数，实例化时自动执行
  constructor() {
    const studentMapInstance = new StudentMapping();
    studentMapInstance.enterstudentsubjectid();
    studentMapInstance.entergradeNum();
  }

  // 或自定义初始化方法，按需调用
  initStudentMapping() {
    const studentMapInstance = new StudentMapping();
    studentMapInstance.enterstudentsubjectid();
    studentMapInstance.entergradeNum();
  }
}

方案2：将StudentMapping的方法改为静态方法 #

如果不需要实例化类，可将方法和对应属性改为静态类型，直接通过类名调用：

修正并修改StudentMapping类： #

export class StudentMapping {
  // 声明静态属性
  static studentsubjectid = "div[id='sid']";
  static studentgradeNum = "div[id='sgrd']";

  // 声明静态方法
  static enterstudentsubjectid() {
    cy.get(StudentMapping.studentsubjectid).type('SND891');
  }

  static entergradeNum() {
    cy.get(StudentMapping.studentgradeNum).type('D');
  }
}

修改StudentDetails类： #

import StudentMapping from '../../students/studentMap';

class StudentDetails {
  studentcode = "div[id='scode']";
  studentname = "div[id='sname']";

  constructor() {
    // 直接通过类名调用静态方法
    StudentMapping.enterstudentsubjectid();
    StudentMapping.entergradeNum();
  }
}

方案3：继承StudentMapping并调用父类方法 #

继承后，通过this调用父类的实例方法，注意必须先调用super()初始化父类：

先修正StudentMapping的拼写错误： #

export class StudentMapping {
  studentsubjectid = "div[id='sid']";
  studentgradeNum = "div[id='sgrd']";

  enterstudentsubjectid() {
    cy.get(this.studentsubjectid).type('SND891'); // 修正大小写不一致问题
  }

  entergradeNum() {
    cy.get(this.studentgradeNum).type('D');
  }
}

修改StudentDetails类： #

import StudentMapping from '../../students/studentMap';

class StudentDetails extends StudentMapping {
  studentcode = "div[id='scode']";
  studentname = "div[id='sname']";

  constructor() {
    super(); // 继承必须调用super()初始化父类
    this.enterstudentsubjectid(); // 调用父类实例方法
    this.entergradeNum();
  }
}

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