讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

updream

一键生成高质量推广成片

JavaScript代理模式_拦截器实现

云萱君_3940

云萱君_3940

发布时间:2025-11-26 15:37:22

|

696人浏览过

|

来源于php中文网

原创

Proxy是ES6提供的代理对象,通过new Proxy(target, handler)创建代理,拦截属性访问、赋值、函数调用等操作。例如:get陷阱可记录读取日志或返回默认值;set陷阱可用于数据验证与响应式更新;apply陷阱能监控函数调用参数与结果;has和deleteProperty可控制私有属性安全。实际中可用于实现自动认证请求拦截、AOP切面编程等。需注意仅能代理对象、存在性能开销及兼容性限制。结合Reflect可增强代理完整性。

javascript代理模式_拦截器实现

JavaScript 中的代理模式通过 Proxy 构造函数实现,可以对对象的操作进行拦截和自定义处理。这种机制非常适合用来实现拦截器,比如在访问属性、修改属性、调用方法等操作前加入逻辑控制、日志记录、权限校验等。

什么是 Proxy 代理

Proxy 是 ES6 引入的一个内置对象,用于创建一个对象的代理,从而实现基本操作的拦截和自定义。语法如下:

const proxy = new Proxy(target, handler);

target:要被代理的对象。
handler:一个对象,定义了代理的行为(即拦截器),比如 get、set、apply 等陷阱(traps)。

常见拦截操作示例

下面是一些常用的拦截方式及其应用场景:

1. 拦截属性读取(get)

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

当访问对象属性时触发,可用于数据绑定、默认值返回、日志输出等。

const user = { name: 'Alice', age: 25 }; const proxyUser = new Proxy(user, { get(target, property) { console.log(`读取属性: ${property}`); return target[property] ?? '未知'; } }); console.log(proxyUser.name); // 输出:读取属性: name → Alice console.log(proxyUser.gender); // 输出:读取属性: gender → 未知

2. 拦截属性设置(set)

当设置属性值时触发,适合做数据验证、更新视图、通知机制等。

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载
const data = {}; const reactiveData = new Proxy(data, { set(target, property, value) { console.log(`设置属性 ${property} 为 ${value}`); target[property] = value; // 可在此处触发 UI 更新或事件通知 return true; } }); reactiveData.count = 1; // 输出:设置属性 count 为 1 reactiveData.count++; // 输出:设置属性 count 为 2

3. 拦截函数调用(apply)

适用于代理函数,可以在函数执行前后插入逻辑,如参数校验、耗时统计等。

function sum(a, b) { return a + b; } const trackedSum = new Proxy(sum, { apply(target, thisArg, args) { console.log('函数被调用,参数:', args); const result = target.apply(thisArg, args); console.log('结果:', result); return result; } }); trackedSum(2, 3); // 输出: // 函数被调用,参数: [2, 3] // 结果: 5

4. 拦截 in、deleteProperty 等操作

可以控制属性是否可枚举、可删除等。

const securedObj = { _secret: '私密信息', public: '公开信息' }; const secureProxy = new Proxy(securedObj, { has(target, prop) { if (prop.startsWith('_')) return false; return prop in target; }, deleteProperty(target, prop) { if (prop.startsWith('_')) { console.log('禁止删除私有属性'); return false; } delete target[prop]; return true; } }); console.log('_secret' in secureProxy); // false delete secureProxy._secret; // 输出:禁止删除私有属性

实际应用:简易请求拦截器

可以用 Proxy 模拟一个 API 请求对象,在每次调用方法前自动添加认证头或日志记录。

const apiClient = { getUser(id) { return `用户 ${id} 的数据`; }, post(data) { return `提交数据: ${JSON.stringify(data)}`; } }; const authHeader = 'Bearer token123'; const interceptedApi = new Proxy(apiClient, { get(target, prop) { const originalMethod = target[prop]; if (typeof originalMethod === 'function') { return function(...args) { console.log(`[请求拦截] 调用 ${prop}, 参数:`, args); console.log(`[添加认证头] ${authHeader}`); return originalMethod.apply(this, args); }; } return originalMethod; } }); console.log(interceptedApi.getUser(1)); // 输出: // [请求拦截] 调用 getUser, 参数: [1] // [添加认证头] Bearer token123 // 用户 1 的数据

这种方式可以作为轻量级 AOP(面向切面编程)实现,无需修改原始逻辑即可增强功能。

注意事项与局限性

使用 Proxy 时需要注意以下几点:

  • 只能代理对象或函数,不能代理原始值(如字符串、数字)。
  • 某些操作无法被完全拦截,例如绕过代理直接操作原对象。
  • 性能开销存在,频繁操作大量属性时需评估影响。
  • 部分浏览器兼容性需要考虑(现代浏览器普遍支持)。

基本上就这些。Proxy 提供了强大的元编程能力,合理使用可以让代码更灵活、可维护性更高。拦截器模式只是冰山一角,结合 Reflect 可以构建更完整的代理逻辑。不复杂但容易忽略细节。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2295

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3742

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1236

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4339

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

305

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

395

2025.12.24

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

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

3788

2023.11.20

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
阶跃Al官方手册
阶跃Al官方手册

共0课时 | 0人学习

Grok官方手册
Grok官方手册

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn