如何从导入的类中调用函数？报“showMessage不是函数”错求解

嘿，这个问题我之前也碰到过，本质是你搞混了类的实例方法和类本身的调用逻辑，咱们一步步来搞定它：

问题根源 #

你导入的test是一个类，而showMessage是这个类的实例方法——也就是说这个方法属于类创建出来的对象（实例），而非类本身。你直接用类名test.showMessage()去调用，自然会触发"不是函数"的报错。

两种可行的解决办法 #

方法1：先创建类实例再调用方法 #

这是最常规的处理方式，适合方法需要依赖类实例属性的场景：

// 先调整类名（建议遵循JS编码规范，类名首字母大写）
// ../test.js 中的代码
export default class Test {
  showMessage(){
    alert('Some text');
  }
}

// 导入并使用的代码
import Test from '../test'
// 创建类的实例
const testInstance = new Test();
// 通过实例调用方法
testInstance.showMessage(); // 现在就能正常弹出提示啦

方法2：将方法改为静态方法（无需实例化） #

如果showMessage只是一个独立的工具方法，不需要用到类里的实例属性，那可以把它定义成静态方法，这样就能直接用类名调用：

// ../test.js 中的代码修改
export default class Test {
  // 加上static关键字，把方法转为类的静态方法
  static showMessage(){
    alert('Some text');
  }
}

// 导入后直接调用
import Test from '../test'
Test.showMessage(); // 这样也能正常运行

总结 #

• 如果你的方法需要用到类里的实例变量（比如this.xxx），优先选方法1；
• 如果只是单纯的工具函数，不需要实例化类，那方法2更合适。

内容的提问来源于stack exchange，提问作者j.doe