如何理解JavaScript代理对象(JavaScript Proxy)

a2bef8d994c10bbbfdbf6a208362ed52.png

JavaScript的Proxy对象是一种强大且灵活的特性,它允许你拦截并自定义对对象执行的操作。自ECMAScript 6(ES6)引入以来,Proxy对象为控制对象的基本操作行为提供了一种机制,使高级用例和改进的安全性成为可能。

代理对象的基础

一个Proxy是由两个主要组件创建的:目标对象和处理器。目标对象是你想拦截操作的原始对象,处理器是一个包含名为陷阱的方法的对象,这些方法定义了这些操作的自定义行为。

创建一个Proxy

const targetObject = {name: 'John',age: 25,
};
const handler = {get(target, prop) {console.log(`获取属性 ${prop}`);return target[prop];},
};
const proxy = new Proxy(targetObject, handler);
console.log(proxy.name); // 输出: 获取属性 name, John

在这个例子中,get陷阱拦截属性访问并在返回实际属性值之前记录一条消息。

理解目标、属性和值

  • 目标(Target):目标是Proxy包裹的原始对象。在上面的例子中,targetObject就是目标。

  • 属性(Prop):属性表示对象上被访问的属性。在get陷阱中,prop是被访问的属性的名称。

  • 值(Value):值指的是赋给属性的值。在set陷阱中,value是被赋给属性的新值。

常见的处理器方法

  1. get(target, prop, receiver)get陷阱拦截属性访问,并允许你自定义读取属性时的行为。

  2. set(target, prop, value, receiver)set陷阱拦截属性赋值,并使你能够验证或修改被赋的值。

  3. has(target, prop)has陷阱在使用in操作符检查属性是否存在时触发。

  4. deleteProperty(target, prop)deleteProperty陷阱在使用delete操作符删除属性时被调用。

  5. apply(target, thisArg, argumentsList)apply陷阱在Proxy作为函数调用时被触发。

代理对象的应用场景

1. 数据验证

使用代理对象可以通过验证或修改属性值来强制执行数据约束。

const validatedUser = new Proxy({}, {set(target, prop, value) {if (prop === 'age' && (typeof value !== 'number' || value < 0 || value > 120)) {throw new Error('无效的年龄');}target[prop] = value;return true;},
});
validatedUser.age = 30; // 有效赋值
validatedUser.age = -5; // 抛出错误: 无效的年龄

2. 日志记录

代理对象可以轻松记录属性访问情况,为调试或性能监控提供见解。

const loggedObject = new Proxy({}, {get(target, prop) {console.log(`访问属性: ${prop}`);return target[prop];},
});
loggedObject.name = 'Alice'; // 访问属性: name
console.log(loggedObject.name); // 访问属性: name

3. 安全性

代理对象可以通过防止未授权的属性访问或操作来增强对象安全性。

const securedObject = new Proxy({ secret: 'classified' }, {get(target, prop) {if (prop === 'secret') {throw new Error('未授权的访问');}return target[prop];},
});
console.log(securedObject.publicInfo); // 访问允许
console.log(securedObject.secret); // 抛出错误: 未授权的访问

4. 记忆化

代理对象可用于记忆化,缓存耗时的函数调用结果以提高性能。

function fibonacci(n) {if (n <= 1) {return n;}return fibonacci(n - 1) + fibonacci(n - 2);
}
const memoizedFibonacci = new Proxy({}, {get(target, prop) {if (!(prop in target)) {target[prop] = fibonacci(Number(prop));}return target[prop];},
});
console.log(memoizedFibonacci[10]); // 计算并缓存
console.log(memoizedFibonacci[5]);  // 从缓存中获取

实战示例:电商场景

考虑一个电商场景,你想使用代理对象来强制执行某些业务规则。

const product = {name: 'Smartphone',price: 500,quantity: 10,
};
const securedProduct = new Proxy(product, {set(target, prop, value) {if (prop === 'quantity' && value < 0) {throw new Error('无效的数量');}target[prop] = value;return true;},
});
securedProduct.quantity = 15; // 有效赋值
securedProduct.quantity = -5; // 抛出错误: 无效的数量

在这个例子中,Proxy确保产品的数量不能被设置为负值,从而在电商上下文中执行了一个业务规则。

结束

JavaScript Proxy对象为创建动态和可定制的对象行为提供了一个多功能工具。无论是用于数据验证、日志记录、安全性还是性能优化,代理对象都为开发者提供了对对象交互的细粒度控制。理解并利用Proxy对象可以在各种实际场景中编写出更干净、可维护和安全的代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/868740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HNTs-g-PEG-CDs-Biotin NPs;碳量子点修饰接枝生物素化的羟基磷灰石纳米管

HNTs-g-PEG-CDs-Biotin NPs&#xff0c;即碳量子点修饰接枝生物素化的羟基磷灰石纳米管&#xff0c;是一种结合了多种先进材料特性的纳米复合材料。以下是对该材料的详细分析&#xff1a; 一、组成成分及特性 羟基磷灰石纳米管&#xff08;HNTs&#xff09;&#xff1a; 羟基磷…

elasticSearch的索引库文档的增删改查

我们都知道&#xff0c;elasticsearch在进行搜索引擎的工作时&#xff0c;是会先把数据库中的信息存储一份到elasticsearch中&#xff0c;再去分词查询等之后的工作的。 elasticsearch中的文档数据会被序列化为json格式后存储在elasticsearch中。elasticsearch会对存储的数据进…

重庆交通大学数学与统计学院携手泰迪智能科技共建的“智能工作室”

2024年7月4日&#xff0c;重庆交通大学数学与统计学院与广东泰迪智能科技股份有限公司携手共建的“智能工作室”授牌仪式在南岸校区阳光会议室举行。此举标志着数统学院与广东泰迪公司校企合作新篇章的开启&#xff0c;也预示着学院在智能科技教育领域的深入探索和实践。 广东…

代发考生战报:南京考场华为售前HCSP H19-411考试通过

代发考生战报&#xff1a;南京考场华为售前HCSP H19-411考试通过&#xff0c;客服给的题库非常稳定&#xff0c;考试遇到2个新题&#xff0c;剩下全是题库里的原题&#xff0c;想考的放心考吧&#xff0c;考场服务挺好&#xff0c;管理员带着做签名和一些考试说明介绍清楚&…

科研绘图系列:R语言分组柱状图一(Grouped Bar Chart)

介绍 分组柱状图(Grouped Bar Chart)是一种数据可视化图表,用于比较不同类别(分组)内各子类别(子组)的数值。在分组柱状图中,每个分组有一组并列的柱子,每个柱子代表一个子组的数值,不同的分组用不同的列来表示。 特点: 并列柱子:每个分组内的柱子是并列的,便于…

51 单片机[7]:计时器

一、定时器 1. 定时器介绍 51单片机的定时器属于单片机的内部资源&#xff0c;其电路的连接和运转均在单片机内部完成。 定时器作用&#xff1a; &#xff08;1&#xff09;用于计时系统&#xff0c;可实现软件计时&#xff0c;或者使程序每隔一固定时间完成一项操作 &#…

运算符和表达式

运算符 运算&#xff1a;对数据进行加工和处理。 运算符&#xff1a;表示各种运算的符号。 操作数&#xff1a;参与运算的数据。 根据操作数的个数&#xff0c;可以将运算符分为单目、双目和多目运算符。单目运算符只对1个操作数运算&#xff0c;双目运算符对2个操作数运算…

k8s中port,targetPort,nodePort,containerPort的区别

一、说明 在 Kubernetes 中&#xff0c;port、targetPort、nodePort 和 containerPort 是用于定义服务&#xff08;Service&#xff09;和容器之间网络通信的不同参数。 它们各自的作用和含义如下&#xff1a; 1. port 定义&#xff1a;这是服务对外暴露的端口号。作用&#x…

linux指令练习

二、touch、vi练习&#xff1a; 1、在root家目录下创建目录A1和B1 2、进入B1下同时创建三个文件m1, m2 , n1&#xff0c;单独创建目录N1 3、进入到A1目录中分别创建一个文件t1,k2&#xff0c;同时创建目录F1&#xff0c;F2 4、删除B1下的所有1结尾的文件或者目录 5、删除A1目录…

Python基础知识——(001)

文章目录 P4——3. 程序设计语言的分类 1. 程序设计语言 2. 编译与解释 P5——4. Python语言的简介与开发工具 1. Python语言的简介 2. Python语言的发展 3. Python语言的特点 4. Python的应用领域 5. Python的开发工具 P6——5. IPO编程方式 IPO程序编写方法 P7——6. print函…

案例精选 | 聚铭综合日志分析系统为江苏省电子口岸构建高效安全的贸易生态

江苏省电子口岸有限公司&#xff0c;成立于2009年&#xff0c;由江苏省贸促会携手南京海关、江苏检验检疫局及江苏海事局等部门共同出资组建。公司承载着推动江苏乃至长三角地区国际贸易便利化的重大使命&#xff0c;致力于打造一个集先进性、创新性、高效性于一体的电子口岸综…

STM32初识HAL库(下载和使用)

初识HAL库&#xff08;了解&#xff09; ST 为了方便用户开发 STM32芯片开发提供了三种库&#xff1a; 标准外设库 (Standard Peripheral Libraries)HAL库(硬件抽象层)&#xff1a;Hardware Abstraction LayerLL库&#xff1a;Low Layer 一、获取STM32Cube固件包 方式一&…

jQuery 笔记

一、什么是jQuery 框架&#xff1a;半成品软件 Jquery就是封装好的js 本质上还是js jQuery是一个快速、简洁的JavaScript**框架**&#xff0c;是继Prototype之后又一个优秀的**JavaScript代码库**&#xff08;*或JavaScript框架*&#xff09;。 JQuery:封装好的代码库。有一…

【Proteus】按键的实现『⒉种』

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

Qt 进程间通信(一)——QSharedMemory共享内存

QSharedMemory共享内存 序言环境理论—逻辑理解实战—代码读取示例写入示例 序言 讲讲Qt的共享内存吧&#xff0c;巩固下 环境 msvc2022 Qt5.15 参考文档&#xff1a;https://doc.qt.io/qt-5/qsharedmemory.html 理论—逻辑理解 看下面前&#xff0c;你需要将共享内存看成…

JS数据类型检测的方式有哪些 (常用)

typeof 其中数组、对象、null都会被判断为object&#xff0c;其他判断都正确typeof返回的类型都是字符串形式 instanceof instanceof &#xff1a;用于检测一个实例是否属于某个类&#xff0c;通过验证当前类的原型 prototype 是否出现在实例的原型链 __proto__ 上。它不能检测…

如何在Excel中对一个或多个条件求和?

在Excel中&#xff0c;基于一个或多个条件的求和值是我们大多数人的常见任务&#xff0c;SUMIF函数可以帮助我们根据一个条件快速求和&#xff0c;而SUMIFS函数可以帮助我们对多个条件求和。 本文&#xff0c;我将描述如何在Excel中对一个或多个条件求和&#xff1f; 在Excel中…

DataExcelServer局域网文件共享服务器增加两个函数

1、PFSUM合并指定路径下单元格ID的值 PFSUM("/103采购/8月采购名细","amount") 第一个参数为路径&#xff0c;第二个参数为单元格的ID 2、PFQuery 查询路径下 单元格ID值的列表 PFQuery("/103采购/8月采购名细","amount") 查询/103采…

【vue】JSON数据导出excel

前言 导出方式有很多种&#xff0c;但是若只需要数据导出成.xlsx文件并下载的话&#xff0c;只用xlsx一个插件就行 目标 1 实现数据导出excel 2 如何设置表格列宽 3 如何在文件中创建工作表 准备工作 1 安装 npm i xlsx -S 2 引入 npm i xlsx -S 二、导出excel 创建文件 con…

LeetCode 算法:腐烂的橘子 c++

原题链接&#x1f517;&#xff1a;腐烂的橘子 难度&#xff1a;中等⭐️⭐️ 题目 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#…