JavaScript 中 Proxy 怎么实现对象属性的别名映射-js教程-PHP中文网

Proxy可通过拦截get/set实现别名映射，即用一个属性名读写另一属性的数据；需定义aliasMap配置映射规则，handler中按规则转发操作，支持字符串直映射与函数式计算，兼顾默认行为与边界处理。

javascript 中 proxy 怎么实现对象属性的别名映射

Proxy 可以通过拦截 get 和 set 操作，把对某个属性的访问或赋值，自动转发到另一个实际存在的属性上，从而实现“别名映射”——即用一个名字读写另一个名字背后的数据。

定义别名映射规则

先明确哪些属性是别名、对应哪个真实属性。例如让 fullName 作为 firstName 和 lastName 的组合别名，或让 color 映射到 bgColor。

推荐用一个配置对象描述映射关系，结构清晰、易于维护：

const aliasMap = {
  fullName: { get: (obj) => `${obj.firstName} ${obj.lastName}`, set: (obj, val) => {
    const [first, last] = val.split(' ');
    obj.firstName = first;
    obj.lastName = last;
  }},
  color: 'bgColor',
  isActive: 'enabled'
};

在 handler 中处理 get/set 拦截

利用 Reflect.get 和 Reflect.set 保证默认行为，遇到别名时按规则转换：

如果读取的 key 在 aliasMap 中且值为字符串，直接读取对应的真实属性
如果值为对象且含 get 方法，调用它获取计算值
写入时同理：字符串映射直接赋值；带 set 函数则执行自定义逻辑
其余情况走默认行为（Reflect.get/set）

创建并使用 Proxy 实例

把原始对象和 handler 封装成 Proxy，外部代码即可透明使用别名：

Nginx Reverse Proxy

配置 Nginx 反向代理，实现域名绑定。用户说“绑定域名”“配置 Nginx”“反向代理”时触发，将域名绑定到指定 IP:端口。

下载

const target = { firstName: 'John', lastName: 'Doe', bgColor: '#fff', enabled: true };

const handler = {
  get(obj, prop) {
    if (prop in aliasMap) {
      const rule = aliasMap[prop];
      if (typeof rule === 'string') return obj[rule];
      if (typeof rule.get === 'function') return rule.get(obj);
    }
    return Reflect.get(obj, prop);
  },
  set(obj, prop, value) {
    if (prop in aliasMap) {
      const rule = aliasMap[prop];
      if (typeof rule === 'string') obj[rule] = value;
      else if (typeof rule.set === 'function') rule.set(obj, value);
      return true;
    }
    return Reflect.set(obj, prop, value);
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.fullName); // "John Doe"
proxy.fullName = 'Jane Smith';
console.log(proxy.firstName); // "Jane"