javascript - 在对象本身中引用对象变量名

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',
  }
}

然后你可以使用一个函数来创建每个元素:

function add_element(data, key, prefix, additional) {
  const obj = {
    [prefix]: key
  };
  Object.entries(additional).forEach(([
    keySuffix,
    valSuffix
  ]) => obj[prefix + keySuffix] = `${key}--${valSuffix}`);
  data[key] = obj;
}

const bem_data = {};
add_element(bem_data, "button", "btn", {
  Sm: "small",
  "2": "secondary"
});
add_element(bem_data, "alert", "alert", {
  Danger: "danger"
});

console.log(bem_data);

然后导出bem_data并使用bem_data.button、bem_data.alert等