JavaScript魔术：用ES6 Proxy揭秘对象操作秘密

2023-11-13 14:28:26

前言

各位前端小伙伴们，今天我们来聊聊JavaScript中一个神奇的工具——ES6 Proxy。它就像一名隐形的守卫者，能够拦截对象上的各种操作，让你可以随心所欲地控制对象的行为，简直是玩转对象操作的秘密武器！

一、拦截展示结果

最近，我在做一个活动页面时遇到了一个棘手的问题：需要实时展示用户输入的内容，但又不能直接修改原始数据。这时，Proxy就派上用场了！

// 创建一个代理对象
const proxy = new Proxy(data, {
  get: function(target, prop) {
    // 拦截获取操作，展示处理后的结果
    return target[prop] + '展示效果';
  }
});

这样一来，当我们访问代理对象时，就会触发get拦截器，将原始数据加上展示效果的文字返回，而原始数据却丝毫不受影响。

二、数据验证

除了展示效果，Proxy还可以用于数据验证。比如，我们想限制用户只能输入数字：

const proxy = new Proxy(data, {
  set: function(target, prop, value) {
    // 拦截设置操作，判断value是否为数字
    if (typeof value !== 'number') {
      throw new Error('请输入数字');
    } else {
      target[prop] = value;
    }
  }
});

这样，当用户试图给代理对象设置非数字值时，就会触发set拦截器，抛出错误并阻止数据的修改。

三、自动填充

有时候，我们希望在用户输入数据时自动填充某些字段。Proxy也能轻松搞定：

const proxy = new Proxy(data, {
  set: function(target, prop, value) {
    // 拦截设置操作，根据prop自动填充相关字段
    if (prop === 'name') {
      target['age'] = 20;
    }
    target[prop] = value;
  }
});

当用户设置代理对象的name属性时，set拦截器会自动将age属性的值设置为20，从而简化了数据的填充过程。

四、实现特性委托

Proxy还可以实现对象间的特性委托，让一个对象能够使用另一个对象的属性和方法：

const target = { name: '小明' };
const proxy = new Proxy(target, {
  get: function(target, prop) {
    // 委托获取操作到target对象
    return Reflect.get(target, prop);
  }
});