如何重写JS对象默认getter运算符以自动添加属性前缀？

假设我的JavaScript代码中有如下对象：

var myData = {
  "someWeirdPrefix_name": "John Doe",
  "someWeirdPrefix_age": 24,
  ...
}

是否可以重写默认的getter运算符（.），使得编写myData.name时能自动获取到"John Doe"？即让属性获取时自动为给定键添加指定前缀，再获取对应值。已知可以直接清理数据移除前缀，但不符合使用场景，需要对所有属性实现该功能，而非仅name和age。

解决方案 #

方法一：使用ES6 Proxy（推荐） #

Proxy可以拦截对象的属性访问操作，批量实现自动前缀拼接逻辑，无需修改原对象，后续新增的带前缀属性也能自动生效。

const myData = {
  "someWeirdPrefix_name": "John Doe",
  "someWeirdPrefix_age": 24
};

const prefix = "someWeirdPrefix_";
const proxyData = new Proxy(myData, {
  get(target, prop) {
    // 拼接前缀，优先查找带前缀的属性
    const prefixedProp = `${prefix}${prop}`;
    return prefixedProp in target ? target[prefixedProp] : target[prop];
  }
});

// 测试访问
console.log(proxyData.name); // 输出 "John Doe"
console.log(proxyData.age); // 输出 24
// 原对象的无前缀属性也能正常访问
myData.gender = "male";
console.log(proxyData.gender); // 输出 "male"

方法二：使用Object.defineProperty（兼容旧环境） #

如果需要兼容不支持Proxy的旧环境，可以遍历原对象属性，手动为包装对象添加无前缀的getter。这种方式仅对当前已存在的带前缀属性生效，后续新增属性需要手动处理。

const myData = {
  "someWeirdPrefix_name": "John Doe",
  "someWeirdPrefix_age": 24
};

const prefix = "someWeirdPrefix_";
const wrapper = {};

// 遍历原对象的带前缀属性，为wrapper添加对应getter
Object.keys(myData).forEach(key => {
  if (key.startsWith(prefix)) {
    const propName = key.slice(prefix.length);
    Object.defineProperty(wrapper, propName, {
      get() {
        return myData[key];
      },
      enumerable: true // 让属性可被枚举（如for...in遍历）
    });
  }
});

// 测试访问
console.log(wrapper.name); // 输出 "John Doe"
console.log(wrapper.age); // 输出 24

注意事项 #

• Proxy方式不会修改原对象，所有访问逻辑通过代理层处理，更灵活且无副作用。
• Object.defineProperty方式需要提前遍历属性，后续新增的带前缀属性需要手动调用相同逻辑添加getter。

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