仅当从函数调用时才返回类中的 Javascript 数组属性 [重复]

Question

const Color = {
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue',

  values: [this.RED, this.GREEN, this.BLUE],

  allValues() {
    return [this.RED, this.GREEN, this.BLUE]
  }
}

console.log(Color.values); // [undefined, undefined, undefined]
console.log(Color.allValues()); // ["red", "green", "blue"]

我最近开始学习 javascript，这让我很吃惊，我会考虑通过将其包装在一个 hacky 函数中来使其工作，并且真的很想避免这样做。我在这里做错了什么？

Answer 1

这在对象字面量中是不可能的。从文字 this 创建 Object 实例时尚不可用。您可以创建并立即使用某些东西来初始化values，或者使用getter 来设置values 属性（请参阅@James 答案）：

// initialization
const Color = {
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue',
  init() {
    this.values = [this.RED, this.GREEN, this.BLUE];
    return this;
  }
}.init();

console.log(Color.values);

只是为了好玩：如果你想完全排除使用this，这（双关语;）将是 es20xx 的替代品：

const Color = Object.entries({
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue'})
  .reduce( (o, [key, value]) => 
    ( o.values.push(value), {...o, [key]: value} ), {values: []} );
  
console.log(Color.values);

// Or using this utility method
const objWithValues = o => 
    ({...o, values: Object.entries(o).map(([key, value]) => value) });
const Color2 = objWithValues({
    RED: 'red',
    GREEN: 'green',
    BLUE: 'blue'});

console.log(Color2.values);

Answer 2

要回答这个问题，可以通过getter 来完成

const Color = {
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue',

  get values() {
    return [this.RED, this.GREEN, this.BLUE]
  }
}
...
console.log(Color.values); // ['red', 'green', 'blue']