JavaScript中如何在静态方法内使用私有属性？

问题本质 #

你代码里的#colors是实例私有属性——它属于ColorPicker类的每个实例对象，而不是ColorPicker类本身。静态方法是挂载在类上的，调用ColorPicker.random时，静态方法里的this指向的是ColorPicker类，不是某个实例，所以根本访问不到属于实例的#colors，这就是编辑器报错的原因。

正确解决方案 #

方案1：将#colors改为静态私有属性 #

如果这个颜色数组是所有实例和静态方法共用的类级数据，直接定义成静态私有字段即可，完美匹配你的需求：

class ColorPicker {
  // 静态私有属性：属于类本身，仅类的静态方法和实例方法可访问
  static #colors = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];

  constructor(color) {
    this.color = color || ColorPicker.#colors[0];
  }

  static get random() {
    // 静态方法里的this指向类本身，可直接访问静态私有属性
    return this.#colors[Math.floor(Math.random() * this.#colors.length)];
  }

  // 实例方法如果需要访问颜色数组，也可以通过类调用静态私有属性
  getAllColors() {
    return [...ColorPicker.#colors];
  }
}

使用方式完全符合你的预期：

// 无需实例化，直接获取随机颜色
this.#color = ColorPicker.random;
// 实例化ColorPicker组件
this.#colorpicker = new ColorPicker(this.#color);

方案2：抽离共享常量（适合特殊场景） #

如果必须保留#colors作为实例私有属性，同时不想重复写颜色数组，可以把数组抽成外部共享常量：

// 外部共享常量，仅类内部可引用
const COLORS = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];

class ColorPicker {
  #colors = COLORS; // 实例私有属性指向共享常量

  constructor(color) {
    this.color = color || this.#colors[0];
  }

  static get random() {
    return COLORS[Math.floor(Math.random() * COLORS.length)];
  }
}

这种方式避免了代码重复，但如果不需要实例单独维护颜色数组，方案1更优——静态私有字段能确保数据的私有性（外部无法直接访问#colors），更符合类的封装原则。

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