JavaScript中的代理（Proxy）如何用于实现数据验证

JavaScript中的Proxy对象可以创建一个代理包装目标对象，拦截并自定义该对象的基本操作，利用这个特性我们可以很方便地实现对象属性的数据验证功能，避免在每个赋值逻辑中重复编写校验代码。

Proxy基础概念

Proxy接收两个参数，第一个是目标对象，第二个是处理器对象，处理器对象中定义各种拦截陷阱，当对代理对象执行对应操作时就会触发这些陷阱。常用的拦截陷阱包括set用于拦截属性赋值、get用于拦截属性读取、deleteProperty用于拦截属性删除等。

使用set陷阱实现属性赋值验证

set陷阱会在给对象属性赋值时触发，我们可以在这个陷阱中编写验证逻辑，验证通过才允许赋值，否则可以抛出错误或者阻止赋值操作。

下面是一个验证用户对象属性合法性的示例，要求用户名必须是字符串且长度在2到10之间，年龄必须是18到60之间的整数：

// 定义目标用户对象
const targetUser = {
  name: '',
  age: 0
};

// 定义处理器对象，配置set陷阱
const userValidator = {
  set(target, property, value) {
    // 验证name属性
    if (property === 'name') {
      if (typeof value !== 'string') {
        throw new TypeError('用户名必须是字符串类型');
      }
      if (value.length < 2 || value.length > 10) {
        throw new RangeError('用户名长度需要在2到10个字符之间');
      }
    }
    // 验证age属性
    if (property === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('年龄必须是整数');
      }
      if (value < 18 || value > 60) {
        throw new RangeError('年龄需要在18到60之间');
      }
    }
    // 验证通过，执行赋值操作
    target[property] = value;
    return true;
  }
};

// 创建代理对象
const userProxy = new Proxy(targetUser, userValidator);

// 测试合法赋值
userProxy.name = '张三';
userProxy.age = 25;
console.log(userProxy.name); // 输出 张三
console.log(userProxy.age); // 输出 25

// 测试非法赋值，会抛出对应错误
try {
  userProxy.name = 123;
} catch (e) {
  console.log(e.message); // 输出 用户名必须是字符串类型
}

try {
  userProxy.age = 15;
} catch (e) {
  console.log(e.message); // 输出 年龄需要在18到60之间
}

扩展验证场景：拦截属性删除操作

除了赋值验证，我们还可以使用deleteProperty陷阱拦截属性删除操作，比如禁止删除已经设置过的必填属性。

下面的示例在上面的用户验证基础上，增加禁止删除name和age属性的逻辑：

// 扩展处理器对象，添加deleteProperty陷阱
const userValidatorWithDelete = {
  set(target, property, value) {
    if (property === 'name') {
      if (typeof value !== 'string') {
        throw new TypeError('用户名必须是字符串类型');
      }
      if (value.length < 2 || value.length > 10) {
        throw new RangeError('用户名长度需要在2到10个字符之间');
      }
    }
    if (property === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('年龄必须是整数');
      }
      if (value < 18 || value > 60) {
        throw new RangeError('年龄需要在18到60之间');
      }
    }
    target[property] = value;
    return true;
  },
  deleteProperty(target, property) {
    // 禁止删除name和age属性
    if (property === 'name' || property === 'age') {
      throw new Error('用户的核心属性不允许删除');
    }
    delete target[property];
    return true;
  }
};

const userProxy2 = new Proxy(targetUser, userValidatorWithDelete);

// 测试删除操作
try {
  delete userProxy2.name;
} catch (e) {
  console.log(e.message); // 输出 用户的核心属性不允许删除
}

Proxy数据验证的优势

和传统的数据验证方式相比，使用Proxy实现数据验证有以下优势：

• 验证逻辑集中管理，不需要在每个赋值的地方重复编写校验代码
• 可以拦截对象的所有赋值、删除等操作，覆盖更全面的操作场景
• 对目标对象的修改不会影响原有逻辑，只需要操作代理对象即可实现验证
• 可以动态配置验证规则，方便后期扩展和修改校验逻辑

注意事项

使用Proxy做数据验证时需要注意，Proxy只能拦截对代理对象的操作，如果直接修改目标对象，是不会触发拦截陷阱的，因此实际使用中应该避免直接操作目标对象，只通过代理对象进行数据操作。

另外，Proxy是ES6新增的特性，在部分低版本浏览器中不支持，如果需要在低版本环境使用，需要搭配对应的polyfill或者转译工具处理。

Proxy数据验证JavaScript对象拦截修改时间：2026-07-07 09:36:30