JS中的Proxy对象有什么用？怎么用？-js教程-PHP中文网

JS中的Proxy对象有什么用？怎么用？

下次还敢

发布： 2025-06-07 10:42:02

原创

1329人浏览过

proxy对象在javascript中主要用于拦截和自定义对目标对象的操作。1. proxy能做什么？它可实现属性访问控制、数据验证、自动更新视图、拦截函数调用等。2. 基本用法是通过new proxy(target, handler)创建，handler中定义get、set、apply等陷阱方法。3. 实际应用场景包括表单输入自动绑定和缓存函数结果。4. 注意事项有兼容性问题、性能开销及不可变性破坏。掌握proxy的常见陷阱方法可灵活应用于状态管理、表单校验等场景。

JS中的Proxy对象有什么用？怎么用？

Proxy对象在JavaScript中主要用来“拦截”对目标对象的操作，比如读取属性、赋值、函数调用等行为。它像是一个中间层，允许你自定义这些操作的行为，而不改变原始对象本身。

1. Proxy能做什么？

Proxy的核心作用是代理对象行为，也就是说，你可以通过它来监听并控制对某个对象的访问和修改。常见的用途包括：

属性访问控制（比如防止访问不存在的属性）
数据验证（设置属性时检查值是否合法）
自动更新视图（在Vue 3中就有使用Proxy来实现响应式系统）
拦截函数调用或构造函数调用

举个简单的例子：你想在访问一个对象的属性时做一些额外处理，比如记录日志或者返回默认值。

const target = {
  name: 'Tom'
};

const proxy = new Proxy(target, {
  get(obj, prop) {
    if (prop in obj) {
      console.log(`访问了属性 ${prop}`);
      return obj[prop];
    } else {
      return '默认值';
    }
  }
});

console.log(proxy.name); // 输出：访问了属性 name \n Tom
console.log(proxy.age);  // 输出：默认值

登录后复制

2. 基本用法：怎么创建一个Proxy？

创建Proxy的基本语法是：

const proxy = new Proxy(target, handler);

登录后复制

target 是你要代理的目标对象
handler 是一个对象，里面可以定义各种“陷阱”方法（trap），比如 get、set、apply 等

常用陷阱包括：

get(target, prop, receiver)：拦截属性读取
set(target, prop, value, receiver)：拦截属性赋值
has(target, prop)：拦截 in 运算符
deleteProperty(target, prop)：拦截 delete 操作
apply(target, thisArg, args)：拦截函数调用

举个数据验证的例子：

行盟APP1.0 php版

行盟APP是结合了通信和互联网的优势，加之云计算所拥有的强大信息资源，借助广大的终端传递服务，潜在的拥有巨大商机。她到底是什么，又有什么作用？她是一款手机应用软件；她是一款专门为企业服务的手机应用软件；她是一款能够将企业各种信息放入其中并进行推广传播的手机应用软件！只要轻轻一点，企业的简介，产品信息以及其他优势就能最快最大限度的透过手机展现在客户的眼前，一部手机，一个APP，你面对的将是一个6亿&

查看详情

const person = {
  age: 0
};

const proxy = new Proxy(person, {
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      console.error('年龄必须是数字');
      return true; // 不抛错但也不更新
    }
    target[prop] = value;
    return true;
  }
});

proxy.age = 'twenty'; // 输出错误信息，但不会真正赋值

登录后复制

3. 实际应用场景举例

表单输入自动绑定

有时候你会希望把用户输入自动绑定到一个对象上，并做一些格式化处理。例如，把字符串转成数字、去空格等。

const form = {};

const formProxy = new Proxy(form, {
  set(target, prop, value) {
    if (prop === 'email') {
      value = value.trim().toLowerCase();
    }
    target[prop] = value;
    return true;
  }
});

登录后复制

这样，每次给 formProxy.email 赋值时都会自动清理格式。

缓存函数结果（Memoization）

如果你有一个计算密集型的函数，可以用Proxy来缓存它的执行结果，避免重复计算。

function expensiveFunc(n) {
  console.log('计算中...');
  return n * n;
}

const handler = {
  apply(target, thisArg, args) {
    const key = args.join(',');
    if (!this.cache) this.cache = {};
    if (key in this.cache) {
      return this.cache[key];
    }
    return this.cache[key] = Reflect.apply(...arguments);
  }
};

const cachedFunc = new Proxy(expensiveFunc, handler);

cachedFunc(5); // 计算中... 返回25
cachedFunc(5); // 直接返回缓存结果25

登录后复制