类中的 Javascript 数组属性仅在从函数调用时返回

Question

这个问题已经有答案了:

Self-references in object literals / initializers (31 个回答)

已关闭 4 年前。

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 创建对象实例尚不可用。您可以创建并立即使用某些东西来初始化值，或者使用 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 的使用，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);