如何实现访问对象属性返回默认值，同时可正常访问其子属性？

针对你的需求，我们可以通过Proxy拦截对象的原始值转换行为，同时保留属性的正常访问，无需添加额外的default属性。

实现代码 #

const createColorProxy = (colorMap, defaultHex) => {
  return new Proxy(colorMap, {
    get(target, prop) {
      // 处理对象转原始值的逻辑
      if (prop === Symbol.toPrimitive) {
        return () => defaultHex;
      }
      // 处理toString调用场景
      if (prop === 'toString') {
        return () => defaultHex;
      }
      // 正常返回子属性值
      return target[prop];
    }
  });
};

// 构建目标对象
const primary = {
  green: createColorProxy(
    {
      dark: '#dark',
      light: '#light'
      // 可按需添加更多颜色属性
    },
    '#def'
  )
};

效果验证 #

• 直接打印primary.green：

  console.log(primary.green); // 输出 "#def"
  

• 访问具体子属性：

  console.log(primary.green.dark); // 输出 "#dark"
  console.log(primary.green.light); // 输出 "#light"
  

原理说明 #

• Symbol.toPrimitive是JavaScript内置符号，用于定义对象转换为原始值的逻辑。当console.log处理对象时，会触发这个转换流程，我们在这里返回预设的默认十六进制字符串。
• 重写toString方法，确保在显式调用toString()或其他隐式字符串转换场景下，同样返回默认值。
• Proxy的get陷阱负责区分访问类型：对于转换相关的特殊属性返回默认值，普通子属性则直接返回目标对象的对应值，完全不影响正常的属性访问逻辑。

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