JavaScript中如何在属性自身内部获取该属性的名称？

嘿，这个需求我之前也碰到过！要在对象属性的内部拿到它自己的属性名，直接在对象字面量里写肯定行不通——毕竟JS没有原生语法能让你在定义属性时直接引用它的名字。不过没关系，我给你整理了几个实用的方案：

方法一：用工厂函数手动绑定（简单直观） #

写一个小函数，专门生成带name属性的对象，创建属性时把属性名传进去就行。这种方法简单易懂，不容易出bug：

// 工厂函数：接收属性名，返回包含name的对象
function createNamedProp(propName) {
  return {
    name: propName.toString()
  };
}

// 定义你的对象
let myObj = {
  myProperty: createNamedProp('myProperty'),
  anotherProp: createNamedProp('anotherProp') // 新增属性也一样操作
};

console.log(myObj.myProperty.name); // 输出 'myProperty'
console.log(myObj.anotherProp.name); // 输出 'anotherProp'

方法二：用Getter函数动态获取（无需额外工厂） #

如果不想单独写工厂函数，可以用对象的getter特性，在访问属性时动态生成包含name的对象：

let myObj = {
  get myProperty() {
    // 这里直接写死属性名，返回带name的对象
    return {
      get name() {
        return 'myProperty';
      }
    };
  }
};

console.log(myObj.myProperty.name); // 输出 'myProperty'

不过要注意：每次访问myObj.myProperty都会生成一个新对象，如果需要复用同一个对象，可以在getter里加个缓存。

方法三：用Proxy实现全自动绑定（最灵活） #

如果想要完全不用手动维护属性名和name的对应关系，新增属性时自动生效，可以用Proxy拦截属性访问，动态给对象加上name属性：

// 封装一个创建带自动name属性对象的函数
const createAutoNamedObj = (originalObj) => {
  return new Proxy(originalObj, {
    get(target, propKey) {
      const value = target[propKey];
      // 如果属性值是对象且没有name属性，就动态添加
      if (typeof value === 'object' && value !== null && !('name' in value)) {
        return { ...value, name: propKey.toString() };
      }
      return value;
    }
  });
};

// 使用这个函数创建对象
let myObj = createAutoNamedObj({
  myProperty: {},
  anotherProp: { desc: '这是另一个属性' } // 原有属性不会被覆盖
});

console.log(myObj.myProperty.name); // 输出 'myProperty'
console.log(myObj.anotherProp.name); // 输出 'anotherProp'
console.log(myObj.anotherProp.desc); // 输出 '这是另一个属性'

这个方案适合属性较多或者需要动态新增属性的场景，一劳永逸。

内容的提问来源于stack exchange，提问作者Lucas Araujo