0

0

javascript Proxy是什么_如何用它拦截对象操作?

幻影之瞳

幻影之瞳

发布时间:2025-12-22 22:07:20

|

182人浏览过

|

来源于php中文网

原创

proxy 是 javascript 中用于创建代理对象的构造函数,通过 target 和 handler 拦截并自定义对象操作;支持 get、set、has 等 trap 实现响应式、验证等功能;需配合 reflect 安全转发,注意仅代理第一层、不可代理原始值等限制。

javascript proxy是什么_如何用它拦截对象操作?

Proxy 是 JavaScript 中用于创建代理对象的构造函数,能拦截并自定义对目标对象的基本操作,比如读取、赋值、删除、调用等。 它不是修改原对象行为的“补丁”,而是包裹一层可编程的中间层,让开发者在不侵入原始逻辑的前提下,实现响应式系统、数据验证、日志记录、访问控制等功能。

Proxy 的基本结构:target + handler

创建 Proxy 需要两个参数:

  • target:被代理的原始对象(可以是普通对象、数组、函数,甚至 null);
  • handler:一个配置对象,里面定义各种“陷阱”(trap),即要拦截的操作及其处理逻辑。

示例:拦截属性读取和设置

const obj = { count: 0 };
const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`读取 ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置 ${prop} = ${value}`);
    target[prop] = value;
    return true; // 必须返回 true 表示赋值成功
  }
});
proxy.count++; // 输出:读取 count → 设置 count = 1

常用拦截操作(trap)及典型用途

以下是最常使用的几个 trap,每个都对应一种对象操作:

人声去除
人声去除

用强大的AI算法将声音从音乐中分离出来

下载

立即学习Java免费学习笔记(深入)”;

  • get(target, prop, receiver):拦截读取属性,可用于响应式依赖收集、默认值兜底(如 obj?.x || 'default' 的轻量替代);
  • set(target, prop, value, receiver):拦截赋值,适合做类型校验、只读限制、变更通知(如 Vue 2 的 defineProperty 替代方案);
  • has(target, prop):拦截 in 操作符,可隐藏属性或模拟稀疏数组;
  • deleteProperty(target, prop):拦截 delete obj.prop,实现不可删除属性;
  • apply(target, thisArg, args):仅对函数生效,拦截函数调用,可用于日志、节流、参数预处理;
  • construct(target, args, newTarget):拦截 new 调用,可控制实例化过程或返回不同对象。

注意边界与常见陷阱

Proxy 强大但有使用限制,忽略这些容易出错:

  • Proxy 只代理第一层——深层嵌套对象不会自动被拦截,需递归代理或结合 Reflect 使用;
  • 不能代理非对象(如原始值 string/number),但可代理包装对象(new String('a'));
  • 某些操作必须返回特定值才能成功,例如 set 必须返回 truehas 必须返回布尔值;
  • 避免在 handler 中直接读写 target 的同名属性,否则可能触发无限递归(应通过 Reflect.get() / Reflect.set() 安全转发);
  • Proxy 对象不等于原对象:proxy === objfalse,且 Object.is(proxy, obj) 也不成立。

配合 Reflect 实现安全转发

Reflect 提供了一组与 trap 同名的静态方法,语义清晰、行为标准,推荐在 handler 中搭配使用:

const proxy = new Proxy({ x: 1 }, {
  get(target, prop, receiver) {
    console.log(`访问 ${prop}`);
    return Reflect.get(target, prop, receiver); // 安全转发
  },
  set(target, prop, value, receiver) {
    console.log(`设置 ${prop}`);
    return Reflect.set(target, prop, value, receiver); // 返回 boolean
  }
});

这样既保留原始行为,又便于扩展逻辑,也避免了 this 绑定或原型链查找的手动处理。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

970

2023.08.02

java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

366

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.30

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1049

2024.03.01

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

558

2023.09.20

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

287

2023.11.13

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 9.3万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号