如何保留对象实际值的同时，获取其引用的键路径字符串？

要同时满足常规取值返回原始值和特定场景获取键路径的需求，核心是给目标值绑定路径信息，同时保证其原始行为不受影响。以下是几种实用的实现方式：

方法1：自定义包装对象+取值方法 #

通过包装函数把值和路径绑定在一起，重载valueOf和toString方法让常规使用时自动返回原始值，同时提供自定义方法获取路径。

const colors = {
  WHITE: "#FFF",
};

// 包装函数：绑定值与对应的键路径
function createTrackedValue(value, path) {
  const tracked = Object.create(null);
  // 常规场景自动返回原始值
  tracked.valueOf = () => value;
  tracked.toString = () => value;
  // 特定场景调用此方法获取路径
  tracked.getPath = () => path;
  return tracked;
}

const style = {
  backgroundColor: createTrackedValue(colors.WHITE, "colors.WHITE"),
};

// 常规使用：和原始值行为一致
console.log(style.backgroundColor === "#FFF"); // 输出 true

// 特定场景：获取键路径
console.log(style.backgroundColor.getPath()); // 输出 "colors.WHITE"

方法2：用Symbol存储路径信息 #

利用Symbol的唯一性，给包装后的对象添加一个Symbol属性存储路径，既不会干扰常规遍历，又能在需要时精准获取路径。

const PATH_SYMBOL = Symbol('path');

const colors = {
  WHITE: "#FFF",
};

function createTrackedValue(value, path) {
  // 包装原始值为对象（原始值无法直接添加属性）
  const tracked = Object(value);
  // 用Symbol存储路径，避免命名冲突
  tracked[PATH_SYMBOL] = path;
  // 保留原始值的行为
  tracked.valueOf = () => value;
  tracked.toString = () => value;
  return tracked;
}

const style = {
  backgroundColor: createTrackedValue(colors.WHITE, "colors.WHITE"),
};

// 常规使用
console.log(style.backgroundColor === "#FFF"); // 输出 true

// 特定场景获取路径
console.log(style.backgroundColor[PATH_SYMBOL]); // 输出 "colors.WHITE"

方法3：Proxy代理自动追踪路径 #

如果需要批量处理多个属性，可通过Proxy代理对象，在访问属性时自动生成并绑定键路径，无需手动传入路径字符串。

const PATH_SYMBOL = Symbol('path');

// 创建可追踪路径的对象代理
function createTrackableObject(obj, parentPath = '') {
  return new Proxy(obj, {
    get(target, prop) {
      const value = target[prop];
      // 拼接当前属性的完整路径
      const currentPath = parentPath ? `${parentPath}.${prop}` : prop;
      
      // 如果值是对象，递归代理
      if (typeof value === 'object' && value !== null) {
        return createTrackableObject(value, currentPath);
      }
      
      // 包装原始值并绑定路径
      const tracked = Object(value);
      tracked[PATH_SYMBOL] = currentPath;
      tracked.valueOf = () => value;
      tracked.toString = () => value;
      return tracked;
    }
  });
}

// 代理colors对象，自动追踪路径
const trackedColors = createTrackableObject(colors);

const style = {
  backgroundColor: trackedColors.WHITE,
};

// 常规使用
console.log(style.backgroundColor === "#FFF"); // 输出 true

// 特定场景获取路径
console.log(style.backgroundColor[PATH_SYMBOL]); // 输出 "colors.WHITE"

注意事项 #

• 如果原始值是对象类型，需要调整包装逻辑（比如方法3的递归代理），避免丢失对象的原始行为。
• 以上方案是基于赋值时绑定路径，而非通过值反向查找键。如果存在多个键对应同一值的情况（比如colors.WHITE和colors.LIGHT都等于"#FFF"），也能准确区分各自的路径。

内容的提问来源于stack exchange，提问作者Stephani Bishop