如何在 javascript 的静态方法中使用私有属性？

Question

我正在尝试以下操作，但编辑器将其标记为错误

class ColorPicker {
  #colors = [array of rgb colors]
  ...
  ...

  constructor(color) {
    ...
  }

  static get random() {
    return this.#colors[Math.floor(Math.random() * this.#colors.length)]
  }
}

我希望能够从 ColorPicker 类获取颜色，而不必实例化它，以便能够使用 ColorPicker 处理的一些颜色配置其他对象，而且还能够实例化它，因为它是一个组件，例如例子

this.#color = ColorPicker.random

this.#colorpicker = new ColorPicker(this.#color)

我有一个具有此属性的 Line 对象，但也实例化了一个 ColorPicker 对象，因此我可以稍后使用此组件操纵线条的颜色

暂时的解决方案如下

  static get random() {
    const colors = [Array of rgb colors] //

    return colors[Math.floor(Math.random() * colors.length)]
  }

但是我想知道为什么我不能直接使用私有属性#colors

获取解决我问题的答案

Answer 1

我认为你想要一个

static

私有字段而不是实例私有字段。类的 instances 上存在 instance 私有字段，因此如果您没有实例，则它不存在。类构造函数本身存在一个

static

私有字段（这就是使用

this

时的

ColorPicker.random

）。要使

#colors

成为

static

私有字段，请在其前面添加

static

，以便您可以从静态方法/访问器（如

random

getter）访问它。

这是一个例子：

class ColorPicker {
    static #colors = ["red", "green", "blue", "yellow"/*...*/];
    // ...
    // ...

    constructor(color) {
        // ...
    }

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

const color = ColorPicker.random;
console.log(color);

（我在那里使用字符串作为颜色的替代品，但这并不重要。）