【ES6】JavaScript的Proxy:理解并实现高级代理功能

在JavaScript中,Proxy是一种能够拦截对对象的读取、设置等操作的机制。它们提供了一种方式,可以在执行基本操作之前或之后,对这些操作进行自定义处理。这种功能在许多高级编程场景中非常有用,比如实现数据验证、日志记录、权限控制等。

1、理解Proxy

在JavaScript中,对象具有一些基本操作,如属性查找、赋值、删除等。当你访问一个对象的属性时,JavaScript会直接返回该属性的值。然而,如果你使用Proxy来“代理”这个对象,那么在执行这些基本操作时,你就可以在JavaScript引擎执行基本操作之前或之后,插入自定义的处理逻辑。

2、创建Proxy

要创建一个Proxy,你需要使用Object.create()方法,并传入一个具有get和set方法的对象作为参数。get方法会在读取属性时被调用,set方法会在设置属性时被调用。

const target = { a: 1, b: 2 };
const handler = {get: function(target, prop, receiver) {console.log(`Reading ${prop}`);return Reflect.get(...arguments);},set: function(target, prop, value, receiver) {console.log(`Setting ${prop}`);return Reflect.set(...arguments);}
};const proxy = new Proxy(target, handler);

在上面的代码中,我们创建了一个名为target的对象,并定义了一个handler对象来处理对target的访问。然后我们使用new Proxy()构造函数创建了一个新的对象proxy,该对象会“代理”对target的访问。
同一个拦截器函数,可以设置拦截多个操作。

var handler = {get: function(target, name) {if (name === 'prototype') {return Object.prototype;}return 'Hello, ' + name;},apply: function(target, thisBinding, args) {return args[0];},construct: function(target, args) {return {value: args[1]};}
};var fproxy = new Proxy(function(x, y) {return x + y;
}, handler);fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。

下面是 Proxy 支持的拦截操作一览,一共 13 种。

  • get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。
  • set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。
  • has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
  • deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
  • ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
  • getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
  • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
  • getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
  • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
  • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
  • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
  • construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。

在这里插入图片描述

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

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

相关文章

【网络教程】群晖如何正确的安装openwrt旁路由

文章目录 准备安装导入镜像创建虚拟机访问旁路由旁路由网络设置准备 我这里的环境是群晖DSM7.2版本首先大家需要预先安装套件Virtual Machine Manager,这里就省略了 根据个人需求去下载openwrt的固件,下载的时候选择x86的img镜像文件,这里也可以直接使用我使用的这个固件(资…

RISC-V 中国峰会 | OpenMPL引人注目,RISC-V Summit China 2023圆满落幕

RISC-V中国峰会圆满落幕 2023年8月25日,为期三天的RISC-V中国峰会(RISC-V Summit China 2023)圆满落幕。本届峰会以“RISC-V生态共建”为主题,结合当下全球新形势,把握全球新时机,呈现RISC-V全球新观点、新…

8.27周报

文章目录 前言论文阅读摘要介绍模型算法 总结 前言 本周学习了GAN论文《Generative Adversarial Nets》,了解GAN主要由两部分组成:生成器和判别器,知道生成器G和判别器D的作用及原理,相比于其他的生成模型,了解GAN的优…

Postman的高级用法—Runner的使用​

1.首先在postman新建要批量运行的接口文件夹,新建一个接口,并设置好全局变量。 2.然后在Test里面设置好要断言的方法 如: tests["Status code is 200"] responseCode.code 200; tests["Response time is less than 10000…

自建音乐播放器之一

这里写自定义目录标题 1.1 官方网站 2. Navidrome 简介2.1 简介2.2 特性 3. 准备工作4. 视频教程5. 界面演示5.1 初始化页5.2 专辑页 前言 之前给大家介绍过 Koel 音频流服务,就是为了解决大家的这个问题:下载下来的音乐,只能在本机欣赏&…

零基础学Python:元组(Tuple)详细教程

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 Python的元组与列表类似, 不同之处在于元组的元素不能修改, 元组使用小括号,列表使用方括号, 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可 👇 👇 👇 更…

软件外包开发人员分类

在软件开发中,通常会分为前端开发和后端开发,下面和大家分享软件开发中的前端开发和后端开发分类和各自的职责,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1. 前端开发&…

【C语言】冒泡排序的快排模拟

说到排序,必然绕不开两个排序,冒泡排序与快速排序 冒泡排序是大多数人的启蒙排序,因为他的算法简单。但效率不高,便于新手理解; 而快速排序是集大成之作,效率最高,使用最为广泛。 今天这篇文章带…

单片机-芯片怎么看图连接

单片机连接数码管 硬件连接线路图 单片机中的IO口连接端子 J25 ,J25 连接 2个电阻 PR14 ,引出管脚 P22 ,P23,P24 P22 、P23、P24 连接 3-8 译码器 三输入、8输出 8 输出 ,连接8个LED1~LED8 用到三个芯片&#xff…

MATLAB 2023安装方法之删除旧版本MATLAB,安装新版本MATLAB

说明:之前一直使用的是MATLAB R2020b,但最近复现Github上的程序时,运行不了,联系作者说他的程序只能在MATLAB 2021之后的版本运行,因此决定安装最新版本的MATLAB。 系统:Windows 11 需要卸载的旧MATLAB 版…

redis面试题二

redis如何处理已过期的元素 常见的过期策略 定时删除:给每个键值设置一个定时删除的事件,比如有一个key值今天5点过期,那么设置一个事件5点钟去执行,把它数据给删除掉(优点:可以及时利用内存及时清除无效数…

Mac版JFormDesigner IDEA插件安装(非商业用途)

前言 仅供个人开发者使用,勿用作商业用途。 仅供个人开发者使用,勿用作商业用途。 仅供个人开发者使用,勿用作商业用途。 感觉做了这些年开发,怎么感觉市场越搞越回去了。桌面应用又成主流了? 甲方让做桌面客户端&am…

Java String类(2)

String方法 字符串拆分 可以将一个完整的字符串按照指定的分隔符划分为若干个子字符串 相关方法如下: 方法功能String[ ] split(String regex)//以regex分割将字符串根据regex全部拆分String[ ] split(String regex, int limit)将字符串以指定的格式,拆…

Liquid UI和Fiori的区别

主要围绕以下几个方面就Liquid UI和Firor来进行比较: 开发周期开发成本稳定性和支援性平台架构 影响Firor决策的因素: 复杂的编程过程,Fiori对开发人员要求高,开发难度大,而Liquid UI让开发人员不需要懂SAP后端&…

jdk-8u371-linux-x64.tar.gz jdk-8u371-windows-x64.exe 【jdk-8u371】 全平台下载

jdk-8u371 全平台下载 jdk-8u371-windows-x64.exejdk-8u371-linux-x64.rpmjdk-8u371-linux-x64.tar.gzjdk-8u371-macosx-x64.dmgjdk-8u371-linux-aarch64.tar.gz 下载地址 迅雷云盘 链接:https://pan.xunlei.com/s/VNdLL3FtCnh45nIBHulh_MDjA1?pwdw4s6 百度…

无涯教程-JavaScript - TDIST函数

The TDIST function replaces the T.DIST.2T & T.DIST.RT functions in Excel 2010. 描述 该函数返回学生t分布的百分点(概率)​​,其中数值(x)是t的计算值,将为其计算百分点。 t分布用于小样本数据集的假设检验。使用此函数代替t分布的临界值表。 语法 TDIST(x,deg_fr…

Elasticsearch:利用矢量搜索进行音乐信息检索

作者:Alex Salgado 欢迎来到音乐信息检索的未来,机器学习、矢量数据库和音频数据分析融合在一起,带来令人兴奋的新可能性! 如果你对音乐数据分析领域感兴趣,或者只是热衷于技术如何彻底改变音乐行业,那么本…

[管理与领导-67]:IT基层管理者 - 辅助技能 - 4- 职业发展规划 - 评估你与公司的八字是否相合

目录 前言: 一、概述 二、八字相合的步骤 2.1 企业文化是否相合 2.2.1 企业文化对职业选择的意义 2.2.2 个人与企业三观不合的结果 2.2.3 什么样的企业文化的公司不能加入 2.2 公司的发展前景 2.3 公司所处行业发展 2.4 创始人的三观 2.5 创始人与上司的…

docker安装grafana,prometheus,exporter以及springboot整合详细教程(GPE)

springboot项目ip:192.168.168.1 测试服务器ip:192.168.168.81 文章来自互联网,自己略微整理下,更容易上手,方便自己,方便大家 最终效果: node springboot 1.下载镜像 docker pull prom/node-exporter docker pull prom/mysqld-exporter docker pull google/cadvisor dock…

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 目录 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 模型描述 M…