如何在JavaScript中定义类与实例均可调用的同名方法

我希望同一个方法能同时从类本身和类实例两个层面访问，示例代码如下：

class AClass {
  // 我想让这个方法同时作为静态方法和实例方法存在
  method() {
    console.log("Method called");
  }
}

我原本以为像Python的@staticmethod那样，把方法设为static就能从实例访问，但实际会报错：

class AClass {
  static method() {
    console.log("Method called");
  }
}

AClass.method();  // 正常执行
(new AClass).method();  // 报错：method is not a function

相似问题说明 #

• 本问题并非“从常规ES6类方法调用静态方法”的重复问题：后者是从实例方法调用不同名称的静态方法，而本需求是让同一个方法名同时作为静态方法和实例方法被访问。

解决方案 #

方案1：手动将静态方法挂载到类原型

class AClass {
  static method() {
    console.log("Method called");
  }
}
// 把静态方法的引用挂载到原型上，让实例可访问
AClass.prototype.method = AClass.method;

AClass.method(); // 输出：Method called
(new AClass).method(); // 输出：Method called

方案2：类内部同时定义静态与实例方法，复用逻辑

class AClass {
  static method() {
    console.log("Method called");
  }
  // 实例方法直接调用静态方法实现复用
  method() {
    AClass.method();
  }
}

AClass.method(); // 输出：Method called
(new AClass).method(); // 输出：Method called

方案3：使用类字段语法（ES2022+）

class AClass {
  static method() {
    console.log("Method called");
  }
  // 类字段直接赋值为静态方法的引用
  method = AClass.method;
}

AClass.method(); // 输出：Method called
(new AClass).method(); // 输出：Method called

原理说明 #

在JavaScript中，静态方法挂载在类的构造函数（AClass）本身，而实例方法挂载在类的原型（AClass.prototype）上，两者属于不同的对象空间，因此默认情况下实例无法访问静态方法。上述方案的核心是将静态方法的引用同步到原型或实例上，实现同一方法名的双向访问。

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