0

0

javascript中的Proxy是什么_如何用它实现数据劫持

幻影之瞳

幻影之瞳

发布时间:2025-12-18 18:11:02

|

528人浏览过

|

来源于php中文网

原创

proxy 是 javascript 中用于拦截并自定义对象基本操作的构造函数,通过代理层实现数据劫持;支持 13 种 trap,如 get、set、has、deleteproperty、ownkeys 等;可天然监听动态属性、数组操作及嵌套对象,但需手动处理深层响应式与数组方法;相比 object.defineproperty,proxy 更强大灵活,但不兼容 ie。

javascript中的proxy是什么_如何用它实现数据劫持

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数,它不是直接修改对象本身,而是创建一个“代理层”,让所有对目标对象的访问都经过这个中间层——这正是实现数据劫持的核心机制。

Proxy 能拦截哪些操作?

Proxy 支持 13 种可拦截的操作(trap),常用包括:

  • get:读取属性时触发,适合监听依赖收集(如 Vue 响应式)
  • set:设置属性时触发,适合响应式更新、数据校验、自动转换
  • has:in 操作符触发,可隐藏属性
  • deleteProperty:delete 操作触发,控制删除权限
  • ownKeys:Object.keys / for...in 触发,可过滤或添加枚举属性

用 Proxy 实现基础响应式数据劫持

与 Object.defineProperty 不同,Proxy 可以监听动态新增/删除属性、数组索引赋值、length 修改等,天然支持数组和嵌套对象。

简单示例:拦截 set/get,打印变化并触发更新函数:

Android配合WebService访问远程数据库 中文WORD版
Android配合WebService访问远程数据库 中文WORD版

采用HttpClient向服务器端action请求数据,当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据,那么什么是webService呢?,它是一种基于SAOP协议的远程调用标准,通过webservice可以将不同操作系统平台,不同语言,不同技术整合到一起。 实现Android与服务器端数据交互,我们在PC机器java客户端中,需要一些库,比如XFire,Axis2,CXF等等来支持访问WebService,但是这些库并不适合我们资源有限的android手机客户端,

下载

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

function reactive(obj, onUpdate) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`设置 ${key} =`, value);
      const result = Reflect.set(target, key, value, receiver);
      onUpdate && onUpdate(); // 触发视图更新
      return result;
    }
  });
}

const state = reactive({ count: 0 }, () => console.log('视图需刷新'));
state.count++; // 输出:设置 count = 1 → 视图需刷新

注意深层响应式与陷阱

Proxy 默认只代理第一层。要实现嵌套对象响应式,需在 get 中递归代理:

  • 每次 get 返回值是对象时,自动 wrap 一层 Proxy(避免重复代理,可用 WeakMap 缓存)
  • set 时若新值是对象,也要递归 reactive 它
  • 数组方法如 push/pop 会触发 set(如修改 length)或 ownKeys(影响 for...in),但不会触发 set(index),需额外处理或重写数组方法
  • Proxy 无法拦截普通函数调用、instanceof、typeof 等操作,这些需配合其他手段(如封装函数、使用 Reflect)

Proxy vs Object.defineProperty 的关键区别

  • Proxy 代理整个对象,defineProperty 只能逐个属性定义
  • Proxy 支持数组索引、length、新增属性的劫持;defineProperty 对数组索引无效,新增属性需重新 define
  • Proxy 有更丰富的拦截能力(如 construct、apply),适合实现类、函数代理
  • 兼容性:Proxy 不支持 IE,需考虑项目环境;defineProperty 兼容性更好(IE9+)

基本上就这些。Proxy 让数据劫持变得更自然、更彻底,现代响应式框架(Vue 3、SolidJS)都基于它构建核心响应系统。不复杂但容易忽略的是:它只是“拦截器”,真正驱动更新还需要依赖收集、副作用调度等配套设计。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
typedef和define区别
typedef和define区别

typedef和define区别在类型检查、作用范围、可读性、错误处理和内存占用等。本专题为大家提供typedef和define相关的文章、下载、课程内容,供大家免费下载体验。

116

2023.09.26

define的用法
define的用法

define用法:1、定义常量;2、定义函数宏:3、定义条件编译;4、定义多行宏。更多关于define的用法的内容,大家可以阅读本专题下的文章。

359

2023.10.11

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

950

2023.09.19

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

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

287

2023.11.13

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

220

2023.12.29

JavaScript中的typeof用法
JavaScript中的typeof用法

在JavaScript中,typeof是一个用来确定给定变量的数据类型的操作符。可以用来确定一个变量是字符串、数字、布尔值、函数、对象或undefined的数据类型。更多关于typeof用法相关文章,详情请看本专题下面的文章,php中文网欢迎大家前来学习。

763

2023.11.23

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

473

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

158

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

64

2026.02.13

热门下载

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

精品课程

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

共42课时 | 8.6万人学习

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

共26课时 | 1.5万人学习

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

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