JavaScript类中无实例依赖的方法应放在内部还是外部？

两种实现方式没有绝对的优劣，具体选择取决于你的项目场景，两种方案的优势分别如下：

所有方法保留在类内（方案1）的优势 #

• 完全自包含：类本身不依赖任何外部逻辑，拷贝到任意项目可以直接运行，不会出现依赖缺失的报错，非常适合作为独立组件跨项目复用
• 作用域安全：工具方法仅在类内部可访问，不会污染全局命名空间，也不会被外部代码意外修改影响类的运行逻辑
• 迭代更安全：后续如果需要为Square类单独调整随机数、随机色生成规则，直接修改类内部方法即可，不会影响其他业务逻辑的运行

工具函数抽离到类外（方案2）的优势 #

• 逻辑复用性高：如果项目内其他组件/类也需要用到随机数生成、随机色生成能力，直接复用外部函数即可，不用重复编写相同逻辑，减少代码冗余
• 类代码可读性更强：仅保留和Square实例属性、核心行为强相关的方法，阅读代码时可以快速理清类的核心能力，不会被通用工具逻辑干扰
• 全局维护成本低：如果需要统一调整随机色的透明度、饱和度，或者修改随机数的生成规则，只需要修改一次外部函数，所有调用的位置都会同步生效，不用逐个类修改

推荐实践 #

可以根据你的实际需求选择：

1. 如果Square类是作为独立组件对外提供，或者项目中仅有Square会用到这两个工具函数，优先选择方案1，保证类的独立性
2. 如果项目多场景需要用到通用工具函数，优先选择方案2，更建议把这类通用逻辑统一放到独立的utils工具模块中管理，不要散落在全局作用域
3. 也可以选择折中方案：将不需要访问实例属性的工具方法设为类的静态方法，既不会污染全局，也能保证类的自包含性，示例如下：

class Square {
  // 静态方法，不需要实例化即可调用
  static randomNumber(max, min = 0) {
    return Math.floor(Math.random() * (max - min) + min);
  }
  static randomColor() {
    return `hsla(${Square.randomNumber(360)}, 50%, 40%, .7)`;
  }

  constructor(maxSize = 150, minSize = 50) {
    this.maxSize = maxSize;
    this.minSize = minSize;
    this.size = this.setRandomSize();
    this.color = Square.randomColor();
  }

  createShape() {
    const square = document.createElement('div');
    square.classList.add('square');
    document.body.appendChild(square);

    square.style.cssText = `
      width: ${this.size}px;
      height: ${this.size}px;
      background-color: ${this.color};
    `;
  }

  setRandomSize() {
    return Square.randomNumber(this.maxSize, this.minSize);
  }
}

new Square().createShape();

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