对象本身内的引用对象变量名称

Question

是否可以在对象本身内引用对象变量声明的名称？就像是：

const foo = {
  bar: `${MAGICTHIS}-bar`,
}

console.log(foo.bar); //foo-bar

---

编辑：

我正在编写一个动态函数，用于将我的所有CSS类名重写为对象中的BEM。我这样做是为了能够在整个应用程序中集中管理它们。没有该功能，它是这样的：

export const button = {
  btn: 'button',
  btnSm: 'button--small',
  btn2: 'button--secondary',

export const alert = { 
  alert: 'alert',
  alertDanger: 'alert--danger',
//etc
}

因为我想隔离使用情况，所以将它们分隔在不同的对象中。我想优化它，因为我会做很多事情。这就是为什么我要编写一个“ bemmify”功能。所以我可以这样做：

export const button = {
  btn: bemmify(),
  btnSm: bemmify('small'),
  btn2: bemmify('secondary'),

export const alert = { 
  alert: bemmify(),
  alertDanger: bemmify('danger'),
//etc
}

并具有与上述对象相同的结果。当然，我总是可以将'base'作为第一个参数（bemmify('button', 'small')）传递，但是我开始怀疑是否有可能让我的bemmify函数变得如此聪明，以至于它可以识别其所在对象的名称。

Answer 1

每当您发现自己在变量名很重要的地方编写代码时，通常应该使用变量名为键的对象。所以你应该有一个像这样的对象：

const bem_data = {
  button: {
    btn: 'button',
    btnSm: 'button--small',
    btn2: 'button--secondary',
  },
  alert: {
    alert: 'alert',
    alertDanger: 'alert--danger',
  }
}

然后，您可以使用函数来创建每个元素：

const bem_data = {
  button: {
    btn: 'button',
    btnSm: 'button--small',
    btn2: 'button--secondary',
  },
  alert: {
    alert: 'alert',
    alertDanger: 'alert--danger',
  }
}

然后导出bem_data和使用bem_data.button，bem_data.alert等等。